transform-2d-getComputedStyle-001.html (4746B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms API Test: transform translate</title> 5 <link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> 8 <meta name="flags" content="dom"> 9 <meta name="assert" content="CSS 2D transforms correctly report their matrix via getComputedStyle()"> 10 <style type="text/css"> 11 .block { 12 display: block; 13 width: 50px; 14 height: 50px; 15 background-color: green; 16 } 17 #translate { 18 transform: translate(10px, 20px); 19 } 20 #translateX { 21 transform: translateX(10px); 22 } 23 #translateY { 24 transform: translateY(20px); 25 } 26 #rotate { 27 transform: rotate(90deg); 28 } 29 #scale { 30 transform: scale(2.0); 31 } 32 #scaleX { 33 transform: scaleX(0.5); 34 } 35 #scaleY { 36 transform: scaleY(1.5); 37 } 38 #skewX { 39 transform: skewX(45deg); 40 } 41 #skewY { 42 transform: skewY(45deg); 43 } 44 #matrix { 45 transform: matrix(1, 2, 3, 4, 5, 6); 46 } 47 </style> 48 <script type="text/javascript" src="/resources/testharness.js"></script> 49 <script type="text/javascript" src="/resources/testharnessreport.js"></script> 50 </head> 51 <body> 52 <div id="log"></div> 53 54 <div id="translate" class="block"></div> 55 <div id="translateX" class="block"></div> 56 <div id="translateY" class="block"></div> 57 <div id="rotate" class="block"></div> 58 <div id="scale" class="block"></div> 59 <div id="scaleX" class="block"></div> 60 <div id="scaleY" class="block"></div> 61 <div id="skewX" class="block"></div> 62 <div id="skewY" class="block"></div> 63 <div id="matrix" class="block"></div> 64 <script type="text/javascript"> 65 function getTransformFor(id) { 66 let transform = 67 window.getComputedStyle(document.getElementById(id)).getPropertyValue("transform"); 68 // Round matrix arguments to allow for small errors in numerical precision. 69 transform = transform.replace(/matrix\(([^\)]*)\)/g, function(match, arguments) { 70 let parts = arguments.split(","); 71 parts = parts.map(str => parseFloat(parseFloat(str).toFixed(6))); 72 return 'matrix(' + parts.join(", ") + ')'; 73 }); 74 return transform; 75 } 76 function clear(id) { 77 const element = document.getElementById(id); 78 const value = window.getComputedStyle(element).transform; 79 element.style.display = 'none'; 80 // https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value 81 // For now both 'none' and 'matrix()' are accepted as resolved value of 82 // transform for an element with 'display: none' until we get a consensus 83 // in https://github.com/w3c/csswg-drafts/issues/9121. 84 assert_in_array( 85 window.getComputedStyle(element).transform, ['none', value], 86 "The resolved value of 'transform' for an element with 'display: none' " + 87 "should be 'none' or should not depend on display value."); 88 } 89 90 test(function() { 91 assert_equals(getTransformFor("translate"), "matrix(1, 0, 0, 1, 10, 20)", "Incorrect matrix for translate()"); 92 clear("translate"); 93 assert_equals(getTransformFor("translateX"), "matrix(1, 0, 0, 1, 10, 0)", "Incorrect matrix for translateX()"); 94 clear("translateX"); 95 assert_equals(getTransformFor("translateY"), "matrix(1, 0, 0, 1, 0, 20)", "Incorrect matrix for translateY()"); 96 clear("translateY"); 97 }, "Matrix for translation transforms"); 98 99 test(function() { 100 assert_equals(getTransformFor("rotate"), "matrix(0, 1, -1, 0, 0, 0)", "Incorrect matrix for rotate()"); 101 clear("rotate"); 102 }, "Matrix for rotate"); 103 104 test(function() { 105 assert_equals(getTransformFor("scale"), "matrix(2, 0, 0, 2, 0, 0)", "Incorrect matrix for scale()"); 106 clear("scale"); 107 assert_equals(getTransformFor("scaleX"), "matrix(0.5, 0, 0, 1, 0, 0)", "Incorrect matrix for scaleX()"); 108 clear("scaleX"); 109 assert_equals(getTransformFor("scaleY"), "matrix(1, 0, 0, 1.5, 0, 0)", "Incorrect matrix for scaleY()"); 110 clear("scaleY"); 111 }, "Matrix for scaling"); 112 113 test(function() { 114 assert_equals(getTransformFor("skewX"), "matrix(1, 0, 1, 1, 0, 0)", "Incorrect matrix for skewX()"); 115 clear("skewX"); 116 assert_equals(getTransformFor("skewY"), "matrix(1, 1, 0, 1, 0, 0)", "Incorrect matrix for skewY()"); 117 clear("skewY"); 118 }, "Matrix for skew"); 119 120 test(function() { 121 assert_equals(getTransformFor("matrix"), "matrix(1, 2, 3, 4, 5, 6)", "Incorrect matrix for matrix()"); 122 clear("matrix"); 123 }, "Matrix for general transform"); 124 </script> 125 </body> 126 </html>