Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /resize-observer/devicepixel.html - WPT Dashboard Interop Dashboard
<!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>