630835-1.html (1020B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <style> 5 #d { 6 background: red; 7 position: absolute; 8 top: 8px; 9 left: 8px; 10 height: 200px; 11 width: 800px; 12 transform: rotate(40deg); 13 } 14 #d2 { 15 background: white; 16 position: absolute; 17 top: 6px; 18 left: 6px; 19 height: 204px; 20 width: 804px; 21 transform: rotate(45deg); 22 } 23 </style> 24 </head> 25 <body> 26 <script> 27 function doTest() { 28 // The first rotation here makes the transform active. The second rotation 29 // sets it back where it belongs. 30 var d = document.getElementById("d"); 31 d.style.transform = 'rotate(45deg)'; 32 document.documentElement.removeAttribute('class'); 33 } 34 window.addEventListener("MozReftestInvalidate", doTest); 35 </script> 36 <div id="d">test</div> 37 <!-- d2 covers up d completely so that we don't get a reftest failure due to a difference 38 between the rendering of an 'active transform' (transformed via layers) vs an inactive 39 transform (transformed via D2D or cairo) --> 40 <div id="d2">test</div> 41 </body> 42 </html>