resize-observer/devicepixel.html

<!doctype html>
<link rel="match" href="devicepixel-ref.html">
<meta name="assert" content="Device pixel content box sizes and pixel snapping are correct in Resize Observer callback">
<!--
  This test verifies that the device pixel content box sizes available
  in a resize observer callback are correct. Resize observer notifications
  are delivered as the element is loaded. A box is then drawn using the
  available dimensions in device pixels. The result is compared to the reference
  which uses div and border to draw a box.
-->

<style>
  #canvas2D {
    width: 100%;
    height: 100%;
  }
  #canvas2DPadding14 {
    width: 100%;
    height: 100%;
  }
  #outer {
    padding-top: 1.7px;
    width: 300.8px;
    height: 250.1px;
  }
  #outer2 {
    padding-top: 1.4px;
    width: 300.8px;
    height: 250.1px;
  }

</style>
<body>
  <div id="outer">
    <canvas id="canvas2D"></canvas>
  </div>
  <div id="outer2">
    <canvas id="canvas2DPadding14"></canvas>
  </div>
</body>

<script>
  // Create a box using device pixel content box dimensions
  function paint2D(ctx, snappedSize) {
    ctx.beginPath();
    // Use a linewidth of 2. Because the rectangle is drawn at 0,0 with
    // its dimensions being the same as canvas dimensions, linewidth as it
    // is drawn on the canvas will be 1.
    ctx.lineWidth = window.devicePixelRatio * 2;
    ctx.strokeStyle = "green";
    ctx.rect(0, 0, snappedSize.inlineSize, snappedSize.blockSize);
    ctx.stroke();
  }

  function updateCanvasSize2D(canvas2D, ctx, snappedSize) {
    canvas2D.width = snappedSize.inlineSize;
    canvas2D.height = snappedSize.blockSize;
    paint2D(ctx, snappedSize);
  }

  (function() {
    let canvas2D = document.querySelector("#canvas2D");
    let canvas2DPadding14 = document.querySelector("#canvas2DPadding14");

    function observeSizes() {
      let ro = new ResizeObserver( entries => {
        for (entry of entries) {
          let size = entry.devicePixelContentBoxSize[0];
          if (entry.target == canvas2D) {
            let canvas2D = document.querySelector("#canvas2D");
            let ctx = canvas2D.getContext("2d");
            updateCanvasSize2D(canvas2D, ctx, size);
          } else if (entry.target == canvas2DPadding14){
            let canvas2DPadding14 = document.querySelector("#canvas2DPadding14");
            let ctx = canvas2DPadding14.getContext("2d");
            updateCanvasSize2D(canvas2DPadding14, ctx, size);
          }
        }
      });
      ro.observe(canvas2D, {box: "device-pixel-content-box"});
      ro.observe(canvas2DPadding14, {box: "device-pixel-content-box"});
    }
    observeSizes();
  })();
</script>