transform-3d-scales-different-x-y-dynamic-001.html (2059B)
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-001-ref.html" /> 7 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-7"> 8 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" /> 9 <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." /> 10 <style> 11 :root { 12 overflow: hidden; 13 } 14 .horizontal, .vertical { 15 position: absolute; 16 top: 0; 17 left: 0; 18 } 19 .vertical { 20 writing-mode: vertical-lr; 21 } 22 .test { 23 transform-origin: 0 0; 24 line-height: 20px; 25 block-size: 20px; 26 inline-size: max-content; 27 border: 5px solid; 28 border-color: blue orange; 29 margin-inline-start: calc(30px * var(--index)); 30 } 31 .horizontal > .test { 32 transform: scale3d(var(--scale), 1, 1); 33 } 34 .vertical > .test { 35 transform: scale3d(1, var(--scale), 1); 36 } 37 </style> 38 <body> 39 <script> 40 "use strict"; 41 const horizontal = document.createElement("div"); 42 horizontal.className = "vertical"; 43 const vertical = document.createElement("div"); 44 vertical.className = "horizontal"; 45 document.body.append(horizontal, vertical); 46 const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse(); 47 for (let i = 0; i < scales.length; ++i) { 48 const scale = scales[i]; 49 const htest = document.createElement("div"); 50 htest.className = "test"; 51 htest.textContent = "Lorem"; 52 htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`; 53 horizontal.appendChild(htest); 54 const vtest = htest.cloneNode(); 55 vtest.textContent = "Ipsum"; 56 vertical.appendChild(vtest); 57 } 58 document.addEventListener("TestRendered", () => { 59 horizontal.className = "horizontal"; 60 vertical.className = "vertical"; 61 document.documentElement.classList.remove("reftest-wait"); 62 }); 63 </script> 64 </body> 65 </html>