screenshot: get node's position relative to its document

Before this change, it's relative to the viewport. So it will get
the wrong position if the page scrolls.

Fixes chromedp#844.

js.go

@@ -45,6 +45,11 @@ var (
 	//go:embed js/visible.js
 	visibleJS string
 
+	// getClientRectJS is a javascript snippet that returns the information about the
+	// size of the specified node and its position relative to its owner document.
+	//go:embed js/getClientRect.js
+	getClientRectJS string
+
 	// waitForPredicatePageFunction is a javascript snippet that runs the polling in the
 	// browser. It's copied from puppeteer. See
 	// https://github.com/puppeteer/puppeteer/blob/669f04a7a6e96cc8353a8cb152898edbc25e7c15/src/common/DOMWorld.ts#L870-L944

js/getClientRect.js

@@ -0,0 +1,10 @@
+function getClientRect() {
+  const e = this.getBoundingClientRect(),
+    t = this.ownerDocument.documentElement.getBoundingClientRect();
+  return {
+    x: e.left - t.left,
+    y: e.top - t.top,
+    width: e.width,
+    height: e.height,
+  };
+}

query.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"errors"
 	"fmt"
-	"math"
 	"strconv"
 	"strings"
 	"sync"
@@ -1079,28 +1078,20 @@ func Screenshot(sel interface{}, picbuf *[]byte, opts ...QueryOption) QueryActio
 		}
 
 		// get box model
-		box, err := dom.GetBoxModel().WithNodeID(nodes[0].NodeID).Do(ctx)
-		if err != nil {
+		var clip page.Viewport
+		if err := callFunctionOnNode(ctx, nodes[0], getClientRectJS, &clip); err != nil {
 			return err
 		}
-		if len(box.Margin) != 8 {
-			return ErrInvalidBoxModel
-		}
+
+		// The next comment is copied from the original code.
+		// This seems to be necessary? Seems to do the right thing regardless of DPI.
+		clip.Scale = 1
 
 		// take screenshot of the box
 		buf, err := page.CaptureScreenshot().
 			WithFormat(page.CaptureScreenshotFormatPng).
-			WithClip(&page.Viewport{
-				// Round the dimensions, as otherwise we might
-				// lose one pixel in either dimension.
-				X:      math.Round(box.Margin[0]),
-				Y:      math.Round(box.Margin[1]),
-				Width:  math.Round(box.Margin[4] - box.Margin[0]),
-				Height: math.Round(box.Margin[5] - box.Margin[1]),
-				// This seems to be necessary? Seems to do the
-				// right thing regardless of DPI.
-				Scale: 1.0,
-			}).Do(ctx)
+			WithClip(&clip).
+			Do(ctx)
 		if err != nil {
 			return err
 		}