2d-transform-inline-js.html (2531B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS test: Inline renderer must return the correct computed transform</title> 5 <link rel="author" title="Joone Hur" href="https://joone.github.io"> 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="assert" content="Asserting that you can apply transform to an inline element and it show up in CSS computed values as a matrix"> 11 <style> 12 .container { 13 height: 100px; 14 width: 200px; 15 margin: 30px; 16 outline: 1px solid black; 17 } 18 .box { 19 height: 100%; 20 width: 100%; 21 padding: 5px; 22 margin: 5px; 23 border: 5px solid gray; 24 transform-origin: 20% 50%; 25 } 26 #test-div { 27 background-color: blue; 28 } 29 30 #test-span { 31 background-color: red; 32 } 33 </style> 34 35 </head> 36 <body> 37 <h1>Transform values should be indentical between 38 the blue box(block element) and red box(inline element) </h1> 39 <div class="container"> 40 <div id="test-div" class="box"></div> 41 </div> 42 <span id="test-span" class="box"></span> 43 <script> 44 const testCases = [ 45 { 'transform' : 'translate(80px, 90px)', 'result' : 'matrix(1, 0, 0, 1, 80, 90)' }, 46 { 'transform' : 'scale(1.2, 0.8)', 'result' : 'matrix(1.2, 0, 0, 0.8, 0, 0)' }, 47 { 'transform' : 'skew(-0.7rad, 20deg)', 'result' : 'matrix(1, 0.36397, -0.842288, 1, 0, 0)' }, 48 { 'transform' : 'rotate(45deg)', 'result' : 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)' }, 49 ]; 50 51 test(function() { 52 var testBox = document.getElementById('test-div'); 53 var testSpan = document.getElementById('test-span'); 54 55 testCases.forEach(function(curTest) { 56 // set one of our test transforms 57 testBox.style.transform = curTest.transform; 58 testSpan.style.transform = curTest.transform; 59 60 // read back computed style 61 var computedTransform = window.getComputedStyle(testBox).transform; 62 var computedSpanTransform = window.getComputedStyle(testSpan).transform; 63 64 assert_equals(computedTransform, curTest.result); 65 assert_equals(computedSpanTransform, curTest.result); 66 }); 67 }); 68 </script> 69 </body> 70 </html>