Skip to content

Commit 8e8ed6f

Browse files
greggmangreggman
authored
Add new devicePixel ref test (#34682)
See comments in test for details
1 parent b9afc4f commit 8e8ed6f

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎resize-observer/create-pattern-data-url.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const patternSize = 4;
2+
3+
export default function createPatternDataURL() {
4+
const ctx = document.createElement('canvas').getContext('2d');
5+
ctx.canvas.width = patternSize;
6+
ctx.canvas.height = patternSize;
7+
8+
const b = [0, 0, 0, 255];
9+
const t = [0, 0, 0, 0];
10+
const r = [255, 0, 0, 255];
11+
const g = [0, 255, 0, 255];
12+
13+
const imageData = new ImageData(patternSize, patternSize);
14+
imageData.data.set([
15+
b, t, t, r,
16+
t, b, g, t,
17+
t, r, b, t,
18+
g, t, t, b,
19+
].flat());
20+
ctx.putImageData(imageData, 0, 0);
21+
return {patternSize, dataURL: ctx.canvas.toDataURL()};
22+
}

‎resize-observer/devicepixel2-ref.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<body>
3+
<script type="module">
4+
import createPatternDataURL from './create-pattern-data-url.js';
5+
6+
const { patternSize, dataURL } = createPatternDataURL();
7+
document.body.style.backgroundImage = `url("${dataURL}")`;
8+
9+
function setBackgroundPatternTo1DevicePixel() {
10+
const oneDevicePixel = 1 / devicePixelRatio;
11+
const patternPixels = oneDevicePixel * patternSize;
12+
document.body.style.backgroundSize = `${patternPixels}px ${patternPixels}px`;
13+
}
14+
setBackgroundPatternTo1DevicePixel();
15+
16+
// If we're viewed interactively and the user activates
17+
// full-page-zoom, changes the page zoom level, or resizes
18+
// the window, update the rendering to account for that:
19+
window.addEventListener('resize', setBackgroundPatternTo1DevicePixel);
20+
</script>
21+
</body>

‎resize-observer/devicepixel2.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<link rel="match" href="devicepixel2-ref.html">
3+
<meta name="assert" content="Resize Observer's reported device pixel content box size should be consistent with the actual pixel-snapped painted box size">
4+
<style>
5+
html, body {
6+
margin: 0;
7+
}
8+
.line {
9+
width: 100px;
10+
display: flex;
11+
}
12+
.line>* {
13+
flex: 1;
14+
height: 20px;
15+
}
16+
</style>
17+
<body>
18+
<div></div>
19+
<script type="module">
20+
import createPatternDataURL from './create-pattern-data-url.js';
21+
22+
const {patternSize, dataURL} = createPatternDataURL();
23+
24+
/**
25+
* Set the pattern's size on this element so that it draws where
26+
* 1 pixel in the pattern maps to 1 devicePixel and then set
27+
* its position so it's aligned to the pattern of the body element.
28+
*/
29+
function setPattern(elem, x, y) {
30+
const oneDevicePixel = 1 / devicePixelRatio;
31+
const patternPixels = oneDevicePixel * patternSize;
32+
elem.style.backgroundImage = `url("${dataURL}")`;
33+
elem.style.backgroundSize = `${patternPixels}px ${patternPixels}px`;
34+
elem.style.backgroundPosition = `${-x * oneDevicePixel}px ${-y * oneDevicePixel}px`;
35+
}
36+
37+
/*
38+
This test creates elements like this
39+
40+
<body>
41+
<div>
42+
<div class="line"><div></div><div></div></div>
43+
<div class="line"><div></div><div></div><div></div></div>
44+
<div class="line"><div></div><div></div><div></div><div></div></div>
45+
...
46+
</div>
47+
</body>
48+
49+
It has the first `<div>` starting at the top left corner of the page, the
50+
same as the body so they should both have a devicePixel position of 0,0
51+
52+
The devicePixelContentBoxSize of all the elements is queried with
53+
a ResizeObserver.
54+
55+
It then sets a repeating background-image, background-size and
56+
background-position on the all of the innermost children elements so
57+
they have a 4x4 checkerboard image at a size that should draw each pixel
58+
of the 4x4 checkerboard pattern in single devicePixels and so they should
59+
all align with the same pattern applied in a similar manner to the body.
60+
61+
In other words
62+
63+
<div class="line">
64+
<div></div><div></div><div></div>
65+
</div>
66+
67+
The first child will be displayed at left = 0 so its background-position is
68+
set to 0px 0px. The second child should be displayed at
69+
70+
secondChildLeft = entry(firstChild).devicePixelContentBoxSize[0].inlineSize.
71+
72+
The 3rd child should be displayed at
73+
74+
thirdChildLeft = entry(firstChild).devicePixelContentBoxSize[0].inlineSize +
75+
entry(secondChild).devicePixelContentBoxSize[0].inlineSize
76+
77+
Using the children's device-pixel positions (determined as described above),
78+
we then set each child's background-position to the negated version of the
79+
position that we computed for that child. This effectively makes its pattern's
80+
origin match the document origin.
81+
82+
If what devicePixelContentBox reports is correct the children's patterns
83+
will align with the pattern in the body and the children will be invisible.
84+
If what devicePixelContentBox reports is incorrect the patterns will not
85+
align and it should be clearly visible.
86+
*/
87+
88+
setPattern(document.body, 0, 0);
89+
const wrapperElem = document.querySelector('div');
90+
91+
const elemToDevicePixelSize = new Map();
92+
93+
function setPatternsUsingSizeInfo(entries) {
94+
for (const entry of entries) {
95+
elemToDevicePixelSize.set(entry.target, {
96+
inlineSize: entry.devicePixelContentBoxSize[0].inlineSize,
97+
blockSize: entry.devicePixelContentBoxSize[0].blockSize,
98+
});
99+
}
100+
101+
let devicePixelY = 0;
102+
for (const lineElem of wrapperElem.children) {
103+
let devicePixelX = 0;
104+
for (const childElem of lineElem.children) {
105+
setPattern(childElem, devicePixelX, devicePixelY);
106+
const devicePixelSize = elemToDevicePixelSize.get(childElem);
107+
devicePixelX += devicePixelSize.inlineSize;
108+
}
109+
110+
const lineEntry = elemToDevicePixelSize.get(lineElem);
111+
const lineHeight = lineEntry.blockSize;
112+
devicePixelY += lineHeight;
113+
}
114+
}
115+
116+
const observer = new ResizeObserver(setPatternsUsingSizeInfo);
117+
for (let numFlexItems = 2; numFlexItems < 15; ++numFlexItems) {
118+
const lineElem = document.createElement('div');
119+
lineElem.className = 'line';
120+
observer.observe(lineElem, {box:"device-pixel-content-box"});
121+
for (let j = 0; j < numFlexItems; ++j) {
122+
const inner = document.createElement('div');
123+
lineElem.appendChild(inner);
124+
observer.observe(inner, {box:"device-pixel-content-box"});
125+
}
126+
wrapperElem.appendChild(lineElem);
127+
}
128+
</script>
129+
</body>

0 commit comments

Comments
 (0)