transform-3d-scales-different-x-y-dynamic-002.html (1394B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8" /> 4 <title>Raster transform 3D scales with different X and Y components changing dynamically</title> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 6 <link rel="match" href="transform-3d-scales-different-x-y-dynamic-002-ref.html" /> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" /> 8 <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." /> 9 <style> 10 body { 11 margin: 0; 12 overflow: clip; 13 } 14 .test:nth-of-type(even) { 15 color: white; 16 } 17 .test { 18 position: absolute; 19 width: 0; 20 transform-origin: 0 0; 21 border-right: 25px solid transparent; 22 border-top: calc(25px * var(--scale)) solid currentcolor; 23 transform: scale3d(1, var(--scale), 1); 24 } 25 .change > .test { 26 transform: scale3d(var(--scale), 1, 1); 27 } 28 </style> 29 <body> 30 <script> 31 "use strict"; 32 for (let i = 1; i < 14; ++i) { 33 const test = document.createElement("div"); 34 test.className = "test"; 35 test.style.setProperty("--scale", i * 4); 36 test.style.setProperty("z-index", -i); 37 document.body.appendChild(test); 38 } 39 document.addEventListener("TestRendered", () => { 40 document.body.className = "change"; 41 document.documentElement.classList.remove("reftest-wait"); 42 }); 43 </script> 44 </body>