web-platform-tests · greggman · Sep 24, 2022 · atotic · Sep 24, 2022 · greggman
diff --git a/resize-observer/create-pattern-data-url.js b/resize-observer/create-pattern-data-url.js
@@ -18,5 +18,5 @@ export default function createPatternDataURL() {
     g, t, t, b,
   ].flat());
   ctx.putImageData(imageData, 0, 0);
-  return {patternSize, dataURL: ctx.canvas.toDataURL()};
+  return {patternSize, imageData, dataURL: ctx.canvas.toDataURL()};
 }
diff --git a/resize-observer/devicepixel3-ref.html b/resize-observer/devicepixel3-ref.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<style>
+  .outer {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+  .outer>* {
+    display: block;
+    height: 100px;
+  }
+</style>
+<body>
+  <div class="outer"></div>
+  <script type="module">
+import createPatternDataURL from './create-pattern-data-url.js';
+
+const {patternSize, dataURL} = createPatternDataURL();
+
+/**
+ * Set the pattern's size on this element so that it draws where
+ * 1 pixel in the pattern maps to 1 devicePixel.
+ */
+function setPattern(elem) {
+  const oneDevicePixel = 1 / devicePixelRatio;
+  const patternPixels = oneDevicePixel * patternSize;
+  elem.style.backgroundImage = `url("${dataURL}")`;
+  elem.style.backgroundSize = `${patternPixels}px ${patternPixels}px`;
+}
+
+/*
+This ref creates elements like this
+
+  <body>
+    <div class="outer">
+      <div></div>
+      <div></div>
+      <div></div>
+      ...
+    </div>
+  </body>
+
+Where the outer div is a flexbox centering the child elements.
+Each of the child elements is set to a different width in percent.
+
+The devicePixelContentBox size of each child element is observed
+with a ResizeObserver and when changed, a pattern is applied to
+the element and the pattern's size set so each pixel in the pattern
+will be one device pixel.
+
+A similar process happens in the test HTML using canvases
+and patterns generated using putImageData.
+
+The test and this reference page should then match.
+*/
+
+const outerElem = document.querySelector('.outer');
+
+/**
+ * Set the pattern's size on this element so that it draws where
+ * 1 pixel in the pattern maps to 1 devicePixel.
+ */
+function setPatterns(entries) {
+  for (const entry of entries) {
+    setPattern(entry.target)
+  }
+}
+
+const observer = new ResizeObserver(setPatterns);
+for (let percentSize = 7; percentSize < 100; percentSize += 13) {
+  const innerElem = document.createElement('div');
+  innerElem.style.width = `${percentSize}%`;
+  observer.observe(innerElem, {box:"device-pixel-content-box"});
+  outerElem.appendChild(innerElem);
+}
+  </script>
+</body>
diff --git a/resize-observer/devicepixel3.html b/resize-observer/devicepixel3.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<link rel="match" href="devicepixel3-ref.html">
+<meta name="assert" content="Resize Observer's reported device pixel content box size should be consistent with the actual pixel-snapped painted box size">
+<style>
+  .outer {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+  .outer>* {
+    display: block;
+    height: 100px;
+  }
+</style>
+<body>
+  <div class="outer"></div>
+  <script type="module">
+import createPatternDataURL from './create-pattern-data-url.js';
+
+const {patternSize, imageData: patternImageData} = createPatternDataURL();
+
+
+function setCanvasPattern(canvas, devicePixelWidth, devicePixelHeight) {
+  canvas.width = devicePixelWidth;
+  canvas.height = devicePixelHeight;
+  const ctx = canvas.getContext('2d');
+  const imgData = ctx.createImageData(devicePixelWidth, devicePixelHeight);
+  const srcU32View = new Uint32Array(patternImageData.data.buffer);
+  const dstU32View = new Uint32Array(imgData.data.buffer);
+  for (let dstY = 0; dstY < devicePixelHeight; ++dstY) {
+    for (let dstX = 0; dstX < devicePixelWidth; ++dstX) {
+      const srcX = dstX % patternSize;
+      const srcY = dstY % patternSize;
+      dstU32View[dstY * devicePixelWidth + dstX] = srcU32View[srcY * patternSize + srcX];
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+}
+
+
+/*
+This test creates elements like this
+
+  <body>
+    <div class="outer">
+      <canvas></canvas>
+      <canvas></canvas>
+      <canvas></canvas>
+      ...
+    </div>
+  </body>
+
+Where the outer div is a flexbox centering the child canvases.
+Each of the child canvases is set to a different width in percent.
+
+The size of each canvas in device pixels is queried with ResizeObserver
+and then each canvases' resolution is set to that size so that there should
+be one pixel in each canvas for each device pixel.
+
+Each canvas is filled with a pattern using putImageData.
+
+In the reference the canvas elements are replaced with divs.
+For the divs the same pattern is applied with CSS and its size 
+adjusted so the pattern should appear with one pixel in the pattern
+corresponding to 1 device pixel.
+
+The reference and this page should then match.
+*/
+
+const outerElem = document.querySelector('.outer');
+
+function setPatternsUsingSizeInfo(entries) {
+  for (const entry of entries) {
+    setCanvasPattern(
+        entry.target,
+        entry.devicePixelContentBoxSize[0].inlineSize,
+        entry.devicePixelContentBoxSize[0].blockSize);
+  }
+}
+
+const observer = new ResizeObserver(setPatternsUsingSizeInfo);
+for (let percentSize = 7; percentSize < 100; percentSize += 13) {
+  const canvasElem = document.createElement('canvas');
+  canvasElem.style.width = `${percentSize}%`;
+  observer.observe(canvasElem, {box:"device-pixel-content-box"});
+  outerElem.appendChild(canvasElem);
+}
+  </script>
+</body>