transform-3d-scales-different-x-y-dynamic-001-ref.html (1359B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Reftest Reference</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <style> 6 :root { 7 overflow: hidden; 8 } 9 .horizontal, .vertical { 10 position: absolute; 11 top: 0; 12 left: 0; 13 } 14 .vertical { 15 writing-mode: vertical-lr; 16 } 17 .test { 18 transform-origin: 0 0; 19 line-height: 20px; 20 block-size: 20px; 21 inline-size: max-content; 22 border: 5px solid; 23 border-color: blue orange; 24 margin-inline-start: calc(30px * var(--index)); 25 } 26 .horizontal > .test { 27 transform: scale3d(var(--scale), 1, 1); 28 } 29 .vertical > .test { 30 transform: scale3d(1, var(--scale), 1); 31 } 32 </style> 33 <body> 34 <script> 35 "use strict"; 36 const horizontal = document.createElement("div"); 37 horizontal.className = "horizontal"; 38 const vertical = document.createElement("div"); 39 vertical.className = "vertical"; 40 document.body.append(horizontal, vertical); 41 const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse(); 42 for (let i = 0; i < scales.length; ++i) { 43 const scale = scales[i]; 44 const htest = document.createElement("div"); 45 htest.className = "test"; 46 htest.textContent = "Lorem"; 47 htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`; 48 horizontal.appendChild(htest); 49 const vtest = htest.cloneNode(); 50 vtest.textContent = "Ipsum"; 51 vertical.appendChild(vtest); 52 } 53 </script> 54 </body>