diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html new file mode 100644 index 0000000000..36323a715a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8" /> +<title>Raster transform 3D scales with different X and Y components changing dynamically</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="match" href="transform-3d-scales-different-x-y-dynamic-001-ref.html" /> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-7"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" /> +<meta name="assert" content="Checks that when the X and Y components of a 3D scale are changed dynamically, the result looks like when setting the value from the very beginning." /> +<style> +:root { + overflow: hidden; +} +.horizontal, .vertical { + position: absolute; + top: 0; + left: 0; +} +.vertical { + writing-mode: vertical-lr; +} +.test { + transform-origin: 0 0; + line-height: 20px; + block-size: 20px; + inline-size: max-content; + border: 5px solid; + border-color: blue orange; + margin-inline-start: calc(30px * var(--index)); +} +.horizontal > .test { + transform: scale3d(var(--scale), 1, 1); +} +.vertical > .test { + transform: scale3d(1, var(--scale), 1); +} +</style> +<body> +<script> +"use strict"; +const horizontal = document.createElement("div"); +horizontal.className = "vertical"; +const vertical = document.createElement("div"); +vertical.className = "horizontal"; +document.body.append(horizontal, vertical); +const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse(); +for (let i = 0; i < scales.length; ++i) { + const scale = scales[i]; + const htest = document.createElement("div"); + htest.className = "test"; + htest.textContent = "Lorem"; + htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`; + horizontal.appendChild(htest); + const vtest = htest.cloneNode(); + vtest.textContent = "Ipsum"; + vertical.appendChild(vtest); +} +document.addEventListener("TestRendered", () => { + horizontal.className = "horizontal"; + vertical.className = "vertical"; + document.documentElement.classList.remove("reftest-wait"); +}); +</script> +</body> +</html> |