The Tor Browser / file comparison
comparison: layout/base/tests/test_bug435293-skew.html
layout/base/tests/test_bug435293-skew.html
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:cd52498a0266 |
|---|---|
| 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 type="text/javascript" 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 -moz-transform: skewx(30deg); | |
| 35 } | |
| 36 #test2 { | |
| 37 -moz-transform: skewy(60deg); | |
| 38 } | |
| 39 #test3 { | |
| 40 -moz-transform: skew(45deg, 45deg); | |
| 41 } | |
| 42 #test4 { | |
| 43 -moz-transform: skew(360deg, 45deg); | |
| 44 } | |
| 45 #test5 { | |
| 46 -moz-transform: skew(45deg, 150grad); | |
| 47 } | |
| 48 #test6 { | |
| 49 -moz-transform: skew(80%, 78px); | |
| 50 } | |
| 51 #test7 { | |
| 52 -moz-transform: skew(2em, 40ex); | |
| 53 } | |
| 54 #test8 { | |
| 55 -moz-transform: skew(-45deg, -465deg); | |
| 56 } | |
| 57 #test9 { | |
| 58 -moz-transform: skew(30deg, 30deg, 30deg); | |
| 59 } | |
| 60 | |
| 61 /* approach the singularity from the negative side */ | |
| 62 #test10 { | |
| 63 -moz-transform: skew(50grad, 90.001deg); | |
| 64 } | |
| 65 #test11 { | |
| 66 -moz-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("-moz-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("-moz-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("-moz-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("-moz-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("-moz-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("-moz-transform"), "none", | |
| 133 "Test6: Skew with invalid units"); | |
| 134 | |
| 135 style = window.getComputedStyle(document.getElementById("test7"), ""); | |
| 136 is(style.getPropertyValue("-moz-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("-moz-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("-moz-transform"), "none", | |
| 154 "Test9: Skew in 3d should be ignored"); | |
| 155 | |
| 156 style = window.getComputedStyle(document.getElementById("test10"), ""); | |
| 157 is(style.getPropertyValue("-moz-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("-moz-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> |
