transform-dynamic-change.html (2034B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1270713"> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271931"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414117"> 6 <link rel="match" href="transform-dynamic-change-ref.html"> 7 <body> 8 9 <div id="moveme" style="position:absolute; transform-origin: 0px 0px; transform: matrix(0.3, 0, 0, 0.3, 136, 13);"> 10 <svg width="2384" height="1684" style="position:absolute; left:0; top:0;"> 11 <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" /> 12 <text id="txt" style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)">A</text> 13 </svg> 14 <svg width="2384" height="1684" style="position:absolute; left:0; top:200px;"> 15 <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" /> 16 <text style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)"><tspan id="inline">B</tspan></text> 17 </svg> 18 </div> 19 20 <svg id="svg2" width="500" height="400" style="transform-origin: 0px 0px; transform: translate(-300px, -300px);"> 21 <text x="300" y="350" id="text2" font-size="50">PASS</text> 22 </svg> 23 24 <div id="container3"> 25 <svg width="200" height="100"> 26 <text x="0" y="50" font-size="20">PASS</text> 27 </svg> 28 </div> 29 30 <script> 31 requestAnimationFrame(() => { 32 requestAnimationFrame(() => { 33 document.getElementById('moveme').style.transform = 'matrix(0.9, 0, 0, 0.9, -210, -777)'; 34 document.getElementById('txt').style.fill = 'red'; 35 document.getElementById('inline').style.fill = 'blue'; 36 37 document.getElementById('svg2').style.transform = 'scale(2) translate(-300px, -300px)'; 38 document.getElementById('text2').style.fill = 'green'; 39 40 document.getElementById('container3').style.transformOrigin = "0px 0px"; 41 document.getElementById('container3').style.transform = "scale(3)"; 42 43 document.documentElement.classList.remove('reftest-wait'); 44 }); 45 }); 46 </script> 47 </body> 48 </html>