layout/style/test/test_computed_style.html@8bccb770b82d
layout/style/test/test_computed_style.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Test for miscellaneous computed style issues</title>
5 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
7 </head>
8 <body>
9 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
10 <p id="display"></p>
11 <div id="content" style="display: none">
13 </div>
14 <pre id="test">
15 <script type="application/javascript">
17 /** Test for miscellaneous computed style issues **/
19 var frame_container = document.getElementById("display");
20 var noframe_container = document.getElementById("content");
22 (function test_bug_595650() {
23 // Test handling of horizontal and vertical percentages for border-radius
24 // and -moz-outline-radius.
25 var p = document.createElement("p");
26 p.setAttribute("style", "width: 256px; height: 128px");
27 p.style.borderTopLeftRadius = "1.5625%"; /* 1/64 == 4px 2px */
28 p.style.borderTopRightRadius = "5px";
29 p.style.borderBottomRightRadius = "5px 3px";
30 p.style.borderBottomLeftRadius = "1.5625% 3.125%" /* 1/64 1/32 == 4px 4px */
31 p.style.MozOutlineRadiusTopleft = "1.5625%"; /* 1/64 == 4px 2px */
32 p.style.MozOutlineRadiusTopright = "5px";
33 p.style.MozOutlineRadiusBottomright = "5px 3px";
34 p.style.MozOutlineRadiusBottomleft = "1.5625% 3.125%" /* 1/64 1/32 == 4px 4px */
35 var cs = getComputedStyle(p, "");
37 frame_container.appendChild(p);
38 is(cs.borderTopLeftRadius, "4px 2px",
39 "computed value of % border-radius, with frame");
40 is(cs.borderTopRightRadius, "5px",
41 "computed value of px border-radius, with frame");
42 is(cs.borderBottomRightRadius, "5px 3px",
43 "computed value of px border-radius, with frame");
44 is(cs.borderBottomLeftRadius, "4px",
45 "computed value of % border-radius, with frame");
46 is(cs.MozOutlineRadiusTopleft, "4px 2px",
47 "computed value of % outline-radius, with frame");
48 is(cs.MozOutlineRadiusTopright, "5px",
49 "computed value of px outline-radius, with frame");
50 is(cs.MozOutlineRadiusBottomright, "5px 3px",
51 "computed value of px outline-radius, with frame");
52 is(cs.MozOutlineRadiusBottomleft, "4px",
53 "computed value of % outline-radius, with frame");
55 noframe_container.appendChild(p);
56 is(cs.borderTopLeftRadius, "1.5625%",
57 "computed value of % border-radius, without frame");
58 is(cs.borderTopRightRadius, "5px",
59 "computed value of px border-radius, without frame");
60 is(cs.borderBottomRightRadius, "5px 3px",
61 "computed value of px border-radius, without frame");
62 is(cs.borderBottomLeftRadius, "1.5625% 3.125%",
63 "computed value of % border-radius, without frame");
64 is(cs.MozOutlineRadiusTopleft, "1.5625%",
65 "computed value of % outline-radius, without frame");
66 is(cs.MozOutlineRadiusTopright, "5px",
67 "computed value of px outline-radius, without frame");
68 is(cs.MozOutlineRadiusBottomright, "5px 3px",
69 "computed value of px outline-radius, without frame");
70 is(cs.MozOutlineRadiusBottomleft, "1.5625% 3.125%",
71 "computed value of % outline-radius, without frame");
73 p.parentNode.removeChild(p);
74 })();
76 (function test_bug_595651() {
77 // Test that clamping of border-radius is reflected in computed style.
78 var p = document.createElement("p");
79 p.setAttribute("style", "width: 190px; height: 90px; border: 5px solid;");
80 p.style.borderRadius = "1000px";
81 var cs = getComputedStyle(p, "");
83 frame_container.appendChild(p);
84 is(cs.borderTopLeftRadius, "50px",
85 "computed value of clamped border radius (top left)");
86 is(cs.borderTopRightRadius, "50px",
87 "computed value of clamped border radius (top right)");
88 is(cs.borderBottomRightRadius, "50px",
89 "computed value of clamped border radius (bottom right)");
90 is(cs.borderBottomLeftRadius, "50px",
91 "computed value of clamped border radius (bottom left)");
93 p.style.overflowY = "scroll";
94 is(cs.borderTopLeftRadius, "50px",
95 "computed value of clamped border radius (top left, overflow-y)");
96 // Fennec doesn't have scrollbars for overflow:scroll content
97 if (p.clientWidth == p.offsetWidth - 10) {
98 is(cs.borderTopRightRadius, "50px",
99 "computed value of border radius (top right, overflow-y)");
100 is(cs.borderBottomRightRadius, "50px",
101 "computed value of border radius (bottom right, overflow-y)");
102 } else {
103 is(cs.borderTopRightRadius, "5px",
104 "computed value of clamped border radius (top right, overflow-y)");
105 is(cs.borderBottomRightRadius, "5px",
106 "computed value of clamped border radius (bottom right, overflow-y)");
107 }
108 is(cs.borderBottomLeftRadius, "50px",
109 "computed value of clamped border radius (bottom left, overflow-y)");
111 p.style.overflowY = "hidden";
112 p.style.overflowX = "scroll";
113 is(cs.borderTopLeftRadius, "50px",
114 "computed value of clamped border radius (top left, overflow-x)");
115 is(cs.borderTopRightRadius, "50px",
116 "computed value of clamped border radius (top right, overflow-x)");
117 // Fennec doesn't have scrollbars for overflow:scroll content
118 if (p.clientHeight == p.offsetHeight - 10) {
119 is(cs.borderBottomRightRadius, "50px",
120 "computed value of border radius (bottom right, overflow-x)");
121 is(cs.borderBottomLeftRadius, "50px",
122 "computed value of border radius (bottom left, overflow-x)");
123 } else {
124 is(cs.borderBottomRightRadius, "5px",
125 "computed value of clamped border radius (bottom right, overflow-x)");
126 is(cs.borderBottomLeftRadius, "5px",
127 "computed value of clamped border radius (bottom left, overflow-x)");
128 }
130 p.parentNode.removeChild(p);
131 })();
133 (function test_bug_647885_1() {
134 // Test that various background-position styles round-trip correctly
135 var backgroundPositions = [
136 [ "0 0", "0px 0px", "unitless 0" ],
137 [ "0px 0px", "0px 0px", "0 with units" ],
138 [ "0% 0%", "0% 0%", "0%" ],
139 [ "calc(0px) 0", "0px 0px", "0 calc with units x" ],
140 [ "0 calc(0px)", "0px 0px", "0 calc with units y" ],
141 [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ],
142 [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ],
143 [ "calc(0%) 0", "0% 0px", "0% calc x"],
144 [ "0 calc(0%)", "0px 0%", "0% calc y"],
145 [ "calc(3px + 2% - 2%) 0", "calc(3px + 0%) 0px",
146 "computed 0% calc x"],
147 [ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
148 "computed 0% calc y"],
149 [ "calc(3px - 5px) calc(6px - 7px)", "-2px -1px",
150 "negative pixel width"],
151 [ "", "0% 0%", "initial value" ],
152 ];
154 var p = document.createElement("p");
155 var cs = getComputedStyle(p, "");
156 frame_container.appendChild(p);
158 for (var i = 0; i < backgroundPositions.length; ++i) {
159 var test = backgroundPositions[i];
160 p.style.backgroundPosition = test[0];
161 is(cs.backgroundPosition, test[1], "computed value of " + test[2] + " background-position");
162 }
164 p.parentNode.removeChild(p);
165 })();
167 (function test_bug_647885_2() {
168 // Test that various background-size styles round-trip correctly
169 var backgroundSizes = [
170 [ "0 0", "0px 0px", "unitless 0" ],
171 [ "0px 0px", "0px 0px", "0 with units" ],
172 [ "0% 0%", "0% 0%", "0%" ],
173 [ "calc(0px) 0", "0px 0px", "0 calc with units horizontal" ],
174 [ "0 calc(0px)", "0px 0px", "0 calc with units vertical" ],
175 [ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units horizontal" ],
176 [ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units vertical" ],
177 [ "calc(0%) 0", "0% 0px", "0% calc horizontal"],
178 [ "0 calc(0%)", "0px 0%", "0% calc vertical"],
179 [ "calc(3px + 2% - 2%) 0", "calc(3px + 0%) 0px",
180 "computed 0% calc horizontal"],
181 [ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
182 "computed 0% calc vertical"],
183 [ "calc(3px - 5px) calc(6px - 9px)",
184 "calc(-2px) calc(-3px)", "negative pixel width" ],
185 [ "", "auto auto", "initial value" ],
186 ];
188 var p = document.createElement("p");
189 var cs = getComputedStyle(p, "");
190 frame_container.appendChild(p);
192 for (var i = 0; i < backgroundSizes.length; ++i) {
193 var test = backgroundSizes[i];
194 p.style.backgroundSize = test[0];
195 is(cs.backgroundSize, test[1], "computed value of " + test[2] + " background-size");
196 }
198 p.parentNode.removeChild(p);
199 })();
201 (function test_bug_716628() {
202 // Test that various gradient styles round-trip correctly
203 var backgroundImages = [
204 [ "-moz-radial-gradient(10% bottom, #ffffff, black)",
205 "radial-gradient(at 10% 100%, rgb(255, 255, 255), rgb(0, 0, 0))",
206 "radial gradient 1" ],
207 [ "-moz-radial-gradient(#ffffff, black)",
208 "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
209 "radial gradient 2" ],
210 [ "-moz-radial-gradient(cover, #ffffff, black)",
211 "radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))",
212 "radial gradient 3" ],
213 [ "-moz-radial-gradient(top left -45deg, #ffffff, black)",
214 "-moz-radial-gradient(0% 0% -45deg, rgb(255, 255, 255), rgb(0, 0, 0))",
215 "radial gradient with angle in degrees" ],
216 [ "-moz-linear-gradient(red, blue)",
217 "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
218 "linear gradient 1" ],
219 [ "-moz-linear-gradient(to bottom, red, blue)",
220 "linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
221 "linear gradient 2" ],
222 [ "-moz-linear-gradient(to right, red, blue)",
223 "linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))",
224 "linear gradient 3" ],
225 [ "-moz-linear-gradient(10px 10px -45deg, red, blue)",
226 "-moz-linear-gradient(10px 10px -45deg, rgb(255, 0, 0), rgb(0, 0, 255))",
227 "linear gradient with angle in degrees" ],
228 [ "-moz-linear-gradient(10px 10px -0.125turn, red, blue)",
229 "-moz-linear-gradient(10px 10px -0.125turn, rgb(255, 0, 0), rgb(0, 0, 255))",
230 "linear gradient with angle in turns" ],
231 ];
233 var p = document.createElement("p");
234 var cs = getComputedStyle(p, "");
235 frame_container.appendChild(p);
237 for (var i = 0; i < backgroundImages.length; ++i) {
238 var test = backgroundImages[i];
239 p.style.backgroundImage = test[0];
240 is(cs.backgroundImage, test[1], "computed value of " + test[2] + " background-image");
241 }
243 p.parentNode.removeChild(p);
244 })();
245 </script>
246 </pre>
247 </body>
248 </html>
