2d-rotate-js.html (1283B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS test: Rotate via javascript must show the correct computed rotation</title> 5 <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-the-computed-value"> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-transform-functions"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <meta name="flags" content="svg"> 11 <meta name="assert" content="Asserting that you can rotate an element with JS and it show up in CSS computed values as a matrix"> 12 <style> 13 #box{ 14 margin-top:30px; 15 display: block; 16 width: 50px; 17 height: 50px; 18 background-color: green; 19 } 20 </style> 21 </head> 22 <body> 23 <h1>Rotate via JS</h1> 24 <div id="log"></div> 25 <div id="box"></div> 26 <script> 27 test(function() { 28 var box = document.getElementById("box"); 29 box.style.transform = "rotate(30deg)"; 30 assert_equals(box.style.transform, "rotate(30deg)"); 31 assert_equals(window.getComputedStyle(box).getPropertyValue("transform"), 32 "matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)"); 33 }); 34 </script> 35 </body> 36 </html>