Skip to content

Conversation

@adamraine
Copy link
Contributor

Closes #14415

The device metric dimensions only match the element bounding boxes if the page scale is 1. This PR takes the dimensions of the document element after the viewport is expanded to ensure the element bounding boxes line up with the screenshot.

@adamraine adamraine requested a review from a team as a code owner October 3, 2022 18:03
@adamraine adamraine requested review from connorjclark and removed request for a team October 3, 2022 18:03
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
width: window.outerWidth,
height: window.outerHeight,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creating the smoke test helped me discover that document.documentElement.client* does not represent the actual device size.

screenshot: {
height: 1742,
width: 980,
},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these exact value display raw confidence :P

hopefully we can be this exact in all environments

ViewportDimensions: {
innerWidth: 980,
// This value can vary slightly, depending on the display.
// https://bugs.chromium.org/p/chromium/issues/detail?id=1346355
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm so sorry

@connorjclark
Copy link
Collaborator

from referenced issue

mobile:
image

(is the blurriness expected?)

mobile, but with <meta name="viewport" content="width=device-width, initial-scale=1">:
image

desktop:
image

cnn.com looks good.

@adamraine
Copy link
Contributor Author

(is the blurriness expected?)

I assume so. The actual text is tiny and then we add compression on top of that.

const documentSize =
await context.driver.executionContext.evaluate(getDocumentSize, {
const screenshotAreaSize =
await context.driver.executionContext.evaluate(getScreenshotAreaSize, {
Copy link
Contributor Author

@adamraine adamraine Oct 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should usually be the same as the document size. In some cases (e.g. infinite scroll) the document element could grow larger than the viewport after we expand the viewport size.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounds like a good comment to add.

@adamraine adamraine deleted the fix-fps-element-position branch October 4, 2022 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fullpage screenshot is incorrect for simplest page

3 participants