85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
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>
|