diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-paint-api/hidpi | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-paint-api/hidpi')
4 files changed, 130 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-paint-api/hidpi/canvas-transform-ref.html b/testing/web-platform/tests/css/css-paint-api/hidpi/canvas-transform-ref.html new file mode 100644 index 0000000000..d3e4e0913f --- /dev/null +++ b/testing/web-platform/tests/css/css-paint-api/hidpi/canvas-transform-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id ="canvas" width="540" height="550"></canvas> +<script> +var canvas = document.getElementById('canvas'); +// In the test page, the paint worklet canvas has a size of width of 270 CSS +// pixels, and height of 275. To divided by 2 is to match the canvas size. +canvas.style.width = (canvas.width / 2) + 'px'; +canvas.style.height = (canvas.height / 2) + 'px'; +var ctx = canvas.getContext("2d"); +var fillW = 250; +var fillH = 50; +ctx.setTransform(2 * devicePixelRatio, 0, 0, 2 * devicePixelRatio, 0, 200); +ctx.beginPath(); +ctx.rect(0, 0, fillW, fillH); +ctx.closePath(); +ctx.clip(); +ctx.fillStyle = 'green'; +ctx.fillRect(0, 0, fillW, fillH); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-paint-api/hidpi/canvas-transform.https.html b/testing/web-platform/tests/css/css-paint-api/hidpi/canvas-transform.https.html new file mode 100644 index 0000000000..6dc57abaf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-paint-api/hidpi/canvas-transform.https.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> +<link rel="match" href="canvas-transform-ref.html"> +<style> +.container { + width: 270px; + height: 275px; +} + +#canvas-geometry { + background-image: paint(geometry); +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> +<body> +<div id="canvas-geometry" class="container"></div> + +<script id="code" type="text/worklet"> +// Regression test for crbug.com/970783. The canvas transform matrix should +// account for the devicePixelRatio, such that the clip bounds can be +// properly computed when applying clips. +registerPaint('geometry', class { + paint(ctx, geom) { + var fillW = 250; + var fillH = 50; + ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 100); + ctx.beginPath(); + ctx.rect(0, 0, fillW, fillH); + ctx.closePath(); + ctx.clip(); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, fillW, fillH); + } +}); +</script> + +<script> + importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-paint-api/hidpi/device-pixel-ratio-ref.html b/testing/web-platform/tests/css/css-paint-api/hidpi/device-pixel-ratio-ref.html new file mode 100644 index 0000000000..205cf8963b --- /dev/null +++ b/testing/web-platform/tests/css/css-paint-api/hidpi/device-pixel-ratio-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<style> +html, body { margin: 0; padding: 0; } +canvas {width: 150px; height: 150px; } +</style> +<body> +<p>This test ensures that the PaintWorkletGlobalScope.devicePixelRatio returns +the correct value, which should be identical as window.devicePixelRatio. To +manually test, open both this file and "device-pixel-ratio-ref.html" with a +browser, and you should see two idential green rectangles.</p> +<canvas id ="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById('canvas'); +canvas.width = 150 * window.devicePixelRatio; +canvas.height = 150 * window.devicePixelRatio; +var context = canvas.getContext("2d"); +context.fillStyle = 'green'; +var draw_width = Math.floor(canvas.width / window.devicePixelRatio); +var draw_height = Math.floor(canvas.height / window.devicePixelRatio); +context.fillRect(0, 0, draw_width, draw_height); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-paint-api/hidpi/device-pixel-ratio.https.html b/testing/web-platform/tests/css/css-paint-api/hidpi/device-pixel-ratio.https.html new file mode 100644 index 0000000000..f9516e5ccf --- /dev/null +++ b/testing/web-platform/tests/css/css-paint-api/hidpi/device-pixel-ratio.https.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> +<link rel="match" href="device-pixel-ratio-ref.html"> +<style> +html, body { margin: 0; padding: 0; } +.container { + width: 150px; + height: 150px; +} + +#canvas-geometry { + background-image: paint(geometry); +} +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> +<body> +<p>This test ensures that the PaintWorkletGlobalScope.devicePixelRatio returns +the correct value, which should be identical as window.devicePixelRatio. To +manually test, open both this file and "device-pixel-ratio-ref.html" with a +browser, and you should see two idential green rectangles.</p> +<div id="canvas-geometry" class="container"></div> + +<script id="code" type="text/worklet"> +registerPaint('geometry', class { + paint(ctx, geom) { + ctx.fillStyle = 'green'; + var draw_width = Math.floor(geom.width / devicePixelRatio); + var draw_height = Math.floor(geom.height / devicePixelRatio); + ctx.fillRect(0, 0, draw_width, draw_height); + } +}); +</script> + +<script> + importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); +</script> +</body> +</html> |