Ref test for ResizeObserver devicePixelContenBoxSize #36057
Conversation
This test creates centered canvases with percentage sizes and applies a pattern to each one in device pixels The ref creates divs of the same size and applies the same pattern using CSS The test and the ref should match.
There was a problem hiding this comment.
Clever way to test the device-pixel-content-box.
When I ran the tests I noticed something unexpected: on some page sizes, different divs (ex: 7% and 20%) look slightly different (screenshot attached). I believe this is caused by MacOS rendering. I see the same effect on a screenshot, and the div colors change as I scroll.
Chrome, MacOS, 4K external monitor.
| * 1 pixel in the pattern maps to 1 devicePixel. | ||
| */ | ||
| function setPattern(elem) { | ||
| const oneDevicePixel = 1 / devicePixelRatio; |
There was a problem hiding this comment.
I am always cautious about usage of multiplications by window.devicePixelRatio, fractional sizes can lead to surprising rounding errors. I trust that you understand this better than I do.
There was a problem hiding this comment.
I'm not sure what you mean by "slight different". If you mean the patterns don't align between divs that's expected as the pattern starts at the left most pixel of each div
There was a problem hiding this comment.
I think this is what can happen.
Example: devicePixelRation = 1.66.
You will set background size to a float.
To display a background image, browser will round background size to an integer.
There is no way for you to know if size got rounded up or down.
patternPixel pattern size might end up not being an exact multiple of background size, so you can't guarantee it'll display correctly.
There was a problem hiding this comment.
I don't think that can happen. The browser computes the element size (and therefore the background size) in CSS pixels. The background size is also specified in CSS pixels. Because they are the same units they'll both be converted to device pixels in the same way. It would be a background pattern bug for the pattern not to match what's specified
There was a problem hiding this comment.
I no longer work on Chrome, so I can't consult the rendering team for the details why rendering fractional pixel widths can create scaling artifacts. If you can find a reviewer that agrees with your interpretation what rendering will look like, I am happy to ok this pull request.
There was a problem hiding this comment.
Aside: Trippy test! It's cool how this shows when MacOS re-computes window-to-device mapping after you stop moving the window.
Is this test testing devicePixelContentBoxSize? If so, do we really need to render pixels to test it, rather than just checking the values in javascript? The javascript approach will be a faster test to run, and won't have a dependency on how css background images paint.
WPT uses a device pixel ratio of 1 (issue) so it is strange that firefox is failing. Is their failure just related to devicePixelContentBoxSize with fractional css width/heights? If so, this would also be cleaner to test using javascript.
There was a problem hiding this comment.
So, @progers explained that browsers do random things with patterns (or at least Chrome does) and while this test doesn't trigger those random things there's no guarantee that won't change in the future.
So, closing this PR
This test creates centered canvases with percentage sizes and applies a pattern to each one in device pixels
The ref creates divs of the same size and applies the same pattern using CSS
The test and the ref should match.
works in Chrome, fails in Firefox, Safari doesn't support devicePixelContentBoxSize so both pages appear blank