layout/base/tests/test_bug435293-skew.html@b8a032363ba2
layout/base/tests/test_bug435293-skew.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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" />
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 }
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 }
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>
87 <pre id="test">
88 <script type="application/javascript">
89 runtests();
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");
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");
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");
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");
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");
131 style = window.getComputedStyle(document.getElementById("test6"), "");
132 is(style.getPropertyValue("-moz-transform"), "none",
133 "Test6: Skew with invalid units");
135 style = window.getComputedStyle(document.getElementById("test7"), "");
136 is(style.getPropertyValue("-moz-transform"), "none",
137 "Test7: Skew with more invalid units");
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");
152 style = window.getComputedStyle(document.getElementById("test9"), "");
153 is(style.getPropertyValue("-moz-transform"), "none",
154 "Test9: Skew in 3d should be ignored");
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");
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 }
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>
