test_bug435293-skew.html (6675B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=435293 5 --> 6 <head> 7 <title>Test for Bug 435293</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 11 <style> 12 /* Skewed boxes can get very big. The .pane wrapper prevents them 13 from obscuring the test results. */ 14 .pane { 15 height: 300px; 16 width: 300px; 17 float: left; 18 overflow: auto; 19 border: 1px solid black; 20 } 21 .test { 22 background: green; 23 height: 100px; 24 width: 100px; 25 margin: 100px; 26 } 27 28 /* Radian units are not used in this test because our CSS 29 implementation stores all dimensional values in single- 30 precision floating point, which makes it impossible to 31 hit mathematically interesting angles with radians. 32 Degrees and grads do not suffer this problem. */ 33 #test1 { 34 transform: skewx(30deg); 35 } 36 #test2 { 37 transform: skewy(60deg); 38 } 39 #test3 { 40 transform: skew(45deg, 45deg); 41 } 42 #test4 { 43 transform: skew(360deg, 45deg); 44 } 45 #test5 { 46 transform: skew(45deg, 150grad); 47 } 48 #test6 { 49 transform: skew(80%, 78px); 50 } 51 #test7 { 52 transform: skew(2em, 40ex); 53 } 54 #test8 { 55 transform: skew(-45deg, -465deg); 56 } 57 #test9 { 58 transform: skew(30deg, 30deg, 30deg); 59 } 60 61 /* approach the singularity from the negative side */ 62 #test10 { 63 transform: skew(50grad, 90.001deg); 64 } 65 #test11 { 66 transform: skew(300grad, 90.001deg); 67 } 68 </style> 69 </head> 70 <body> 71 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435293">Mozilla Bug 435293</a> 72 <p id="display"></p> 73 <div id="content"> 74 <div class="pane"><div id="test1" class="test">test</div></div> 75 <div class="pane"><p id="test2" class="test">test</p></div> 76 <div class="pane"><div id="test3" class="test">test</div></div> 77 <div class="pane"><div id="test4" class="test">test</div></div> 78 <div class="pane"><div id="test5" class="test">test</div></div> 79 <div class="pane"><div id="test6" class="test">test</div></div> 80 <div class="pane"><div id="test7" class="test">test</div></div> 81 <div class="pane"><div id="test8" class="test">test</div></div> 82 <div class="pane"><div id="test9" class="test">test</div></div> 83 <div class="pane"><div id="test10" class="test">test</div></div> 84 <div class="pane"><div id="test11" class="test">test</div></div> 85 </div> 86 87 <pre id="test"> 88 <script type="application/javascript"> 89 runtests(); 90 91 function runtests() { 92 // For test 1 we need to handle the contingency that different systems may 93 // round differently. We will parse out the values and compare them 94 // individually. The matrix should be: matrix(1, 0, 0.57735, 1, 0, 0) 95 var style = window.getComputedStyle(document.getElementById("test1")); 96 var tformStyle = style.getPropertyValue("transform"); 97 var tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1, 98 tformStyle.indexOf(')')).split(','); 99 is((+tformValues[0]), 1, "Test1: skewx: param 0 is 1"); 100 is((+tformValues[1]), 0, "Test1: skewx: param 1 is 0"); 101 ok(verifyRounded(tformValues[2], 0.57735), "Test1: skewx: Rounded param 2 is in bounds"); 102 is((+tformValues[3]), 1, "Test1: skewx: param 3 is 1"); 103 is((+tformValues[4]), 0, "Test1: skewx: param 4 is 0"); 104 is((+tformValues[5]), 0, "Test1: skewx: param 5 is 0"); 105 106 // Again, handle rounding for test 2, proper matrix should be: 107 // matrix(1, 1.73205, 0, 1, 0, 0) 108 style = window.getComputedStyle(document.getElementById("test2")); 109 tformStyle = style.getPropertyValue("transform"); 110 tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1, 111 tformStyle.indexOf(')')).split(','); 112 is((+tformValues[0]), 1, "Test2: skewy: param 0 is 1"); 113 ok(verifyRounded(tformValues[1], 1.73205), "Test2: skewy: Rounded param 1 is in bounds"); 114 is((+tformValues[2]), 0, "Test2: skewy: param 2 is 0"); 115 is((+tformValues[3]), 1, "Test2: skewy: param 3 is 1"); 116 is((+tformValues[4]), 0, "Test2: skewy: param 4 is 0"); 117 is((+tformValues[5]), 0, "Test2: skewy: param 5 is 0"); 118 119 style = window.getComputedStyle(document.getElementById("test3")); 120 is(style.getPropertyValue("transform"), "matrix(1, 1, 1, 1, 0, 0)", 121 "Test3: Skew proper matrix is applied"); 122 123 style = window.getComputedStyle(document.getElementById("test4")); 124 is(style.getPropertyValue("transform"), "matrix(1, 1, 0, 1, 0, 0)", 125 "Test4: Skew angle wrap: proper matrix is applied"); 126 127 style = window.getComputedStyle(document.getElementById("test5")); 128 is(style.getPropertyValue("transform"), "matrix(1, -1, 1, 1, 0, 0)", 129 "Test5: Skew mixing deg and grad"); 130 131 style = window.getComputedStyle(document.getElementById("test6")); 132 is(style.getPropertyValue("transform"), "none", 133 "Test6: Skew with invalid units"); 134 135 style = window.getComputedStyle(document.getElementById("test7")); 136 is(style.getPropertyValue("transform"), "none", 137 "Test7: Skew with more invalid units"); 138 139 // Test 8: skew with negative degrees, here again we must handle rounding. 140 // The matrix should be: matrix(1, 3.73206, -1, 1, 0, 0) 141 style = window.getComputedStyle(document.getElementById("test8")); 142 tformStyle = style.getPropertyValue("transform"); 143 tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1, 144 tformStyle.indexOf(')')).split(','); 145 is((+tformValues[0]), 1, "Test8: Test skew with negative degrees-param 0 is 1"); 146 ok(verifyRounded(tformValues[1], 3.73206), "Test8: Rounded param 1 is in bounds"); 147 is((+tformValues[2]), -1, "Test8: param 2 is -1"); 148 is((+tformValues[3]), 1, "Test8: param 3 is 1"); 149 is((+tformValues[4]), 0, "Test8: param 4 is 0"); 150 is((+tformValues[5]), 0, "Test8: param 5 is 0"); 151 152 style = window.getComputedStyle(document.getElementById("test9")); 153 is(style.getPropertyValue("transform"), "none", 154 "Test9: Skew in 3d should be ignored"); 155 156 style = window.getComputedStyle(document.getElementById("test10")); 157 is(style.getPropertyValue("transform"), "matrix(1, -10000, 1, 1, 0, 0)", 158 "Test10: Skew with nearly infinite numbers"); 159 160 style = window.getComputedStyle(document.getElementById("test11")); 161 is(style.getPropertyValue("transform"), "matrix(1, -10000, 10000, 1, 0, 0)", 162 "Test11: Skew with more infinite numbers"); 163 } 164 165 // Verifies that aVal is +/- 0.00001 of aTrueVal 166 // Returns true if so, false if not 167 function verifyRounded(aVal, aTrueVal) { 168 return (Math.abs(aVal - aTrueVal).toFixed(5) <= 0.00001); 169 } 170 </script> 171 </pre> 172 </body> 173 </html>