Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Guidance on rounding floating-point coordinates for Take Element Screenshot #1466
Comments
|
CSS pixels can be fractional but are not necessarily equal to the “real” device pixels drawn on the screen. CSS pixels values are given in pixel units, not in as absolute physical measurements. One pixel unit, or
This is known as the reference pixel, which means that CSS pixel units are modulated by the media’s device pixel ratio and density. The example CSS-VALUES-3 uses to illustrate this effect is that while an area of 1px by 1px will be covered by a single dot in a low-resolution device, the same area may be covered by more dots in higher resolution devices, such as laser printers or on high-DPI screen monitors. WebDriver uses CSS pixels to mark the location of the web element to capture, but the actual computed image file will be represented in absolute device pixels, in integer. To give an example: when you have an area of 1px by 1px CSS pixels on an Apple Retina display, depending on the scaling factor, the produced screenshot might have a dimension of 2px by 2px due to the screen’s pixel ratio (see |
|
Thanks for the clarification, Andreas. Perhaps I oversimplified in my initial post. I agree that the device pixel ratio is also relevant. Given that CSS pixels can be fractional and image files must be represented in absolute device pixels, some kind of conversion needs to happen between the two. To my knowledge, there isn't any formal guidance on how exactly this conversion should be done. I think one could reasonably argue in favor of a couple different implementations, though I'm most in favor of rounding "out" such that the bounds of the final image are greater than or equal to that of the initial image, such that you avoid cropping any content. |
|
WebDriver paints the framebuffer into a This is what HTML has to say about rounding:
WebDriver doesn’t put any restrictions on what it means to draw a region of the framebuffer, saying the implementation must take implementation-defined steps. This means that the scaling of the screenshot is undefined, but that the resulting PNG should always well-formed due to the way |
|
see also #1251 |

Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.

In chapter 17. Screen capture, section 17.2 Take Element Screenshot:
"bounding rectangle" links to https://w3c.github.io/webdriver/#dfn-bounding-rectangle which indicates that x, y, width, and height are of type "double".
The returned screenshot must be a PNG. However, per the PNG spec on Data Representation: http://www.libpng.org/pub/png/spec/1.1/pngext-1.1.0-pdg.html "The core of PNG does not use floating-point numbers anywhere".
Therefore, the implementation must convert the coordinates to be integers, and there is not currently any guidance on how this should be done. Should mathematical rounding be applied? Should values be truncated? Should clients round "out" such that the image is always at least as big as the floating-point-defined rect?