Use document, add README note

README.md

@@ -335,6 +335,21 @@ describe('my-elem', () => {
 
 The filename and location of the resulting image will be based on the suite names and test name.
 
+Sometimes you might be writing tests to verify a component's position within the whole viewport. For snapshots of the whole page, set up your components and pass `document` to the assertion:
+
+```javascript
+import { fixture, html } from '@brightspace-ui/testing';
+
+describe('my-elem', () => {
+  describe('situation1', () => {
+    it('state1', async() => {
+      await fixture(html`<my-dialog opened></my-dialog>`);
+      await expect(document).to.be.golden();
+    });
+  });
+});
+```
+
 #### Configuring the Snapshot Area
 
 By default, the snapshot area will be a rectangle around the source element plus a `10px` buffer margin on each side. To use a different margin, pass it as an option:

src/browser/vdiff.js

@@ -27,7 +27,7 @@ async function ScreenshotAndCompare(opts) {
 	}
 
 	const name = this.test.fullTitle();
-	const rect = this.elem === document.body ? null : this.elem.getBoundingClientRect();
+	const rect = this.elem === document ? null : this.elem.getBoundingClientRect();
 	const slowDuration = this.test.slow();
 	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, rect, slowDuration, opts });
 	if (result.resizeRequired) {

test/browser/element.vdiff.js

@@ -56,7 +56,7 @@ describe('element-matches', () => {
 
 	it('full page', async() => {
 		await fixture(`<${elementTag} text="Visual Difference"></${elementTag}>`, { viewport: { width: 500, height: 500 } });
-		await expect(document.body).to.be.golden();
+		await expect(document).to.be.golden();
 	});
 });