OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <title>The unitless length quirk</title> | |
5 <script src="../../../resources/testharness.js"></script> | |
6 <script src="../../../resources/testharnessreport.js"></script> | |
7 <style> iframe { width:20px; height:20px; } </style> | |
8 </head> | |
9 <body> | |
10 <div id=log></div> | |
11 <iframe id=quirks></iframe> | |
12 <iframe id=almost></iframe> | |
13 <iframe id=standards></iframe> | |
14 <script> | |
15 setup({explicit_done:true}); | |
16 onload = function() { | |
17 var html = "<style id=style></style><div id=test></div><div id=ref></div
>"; | |
18 var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition
al//EN" "http://www.w3.org/TR/html4/loose.dtd">'; | |
19 var s_doctype = '<!DOCTYPE HTML>'; | |
20 var q = document.getElementById('quirks').contentWindow; | |
21 var a = document.getElementById('almost').contentWindow; | |
22 var s = document.getElementById('standards').contentWindow; | |
23 q.document.open(); | |
24 q.document.write(html); | |
25 q.document.close(); | |
26 a.document.open(); | |
27 a.document.write(a_doctype + html); | |
28 a.document.close(); | |
29 s.document.open(); | |
30 s.document.write(s_doctype + html); | |
31 s.document.close(); | |
32 [q, a, s].forEach(function(win) { | |
33 ['style', 'test', 'ref'].forEach(function(id) { | |
34 win[id] = win.document.getElementById(id); | |
35 }); | |
36 }); | |
37 | |
38 var tests = [ | |
39 {input:"1", q:"1px"}, | |
40 {input:"+1", q:"1px"}, | |
41 {input:"-1", q:"-1px"}, | |
42 {input:"1.5", q:"1.5px"}, | |
43 {input:"+1.5", q:"1.5px"}, | |
44 {input:"-1.5", q:"-1.5px"}, | |
45 {input:"\\31 "}, | |
46 {input:"+\\31 "}, | |
47 {input:"-\\31 "}, | |
48 {input:"\\31 .5"}, | |
49 {input:"+\\31 .5"}, | |
50 {input:"-\\31 .5"}, | |
51 {input:"1\\31 "}, | |
52 {input:"+1\\31 "}, | |
53 {input:"-1\\31 "}, | |
54 {input:"1\\31 .5"}, | |
55 {input:"+1\\31 .5"}, | |
56 {input:"-1\\31 .5"}, | |
57 {input:"a"}, | |
58 {input:"A"}, | |
59 {input:"1a"}, | |
60 {input:"+1a"}, | |
61 {input:"-1a"}, | |
62 {input:"+1A"}, | |
63 {input:"-1A"}, | |
64 {input:"+a"}, | |
65 {input:"-a"}, | |
66 {input:"+A"}, | |
67 {input:"-A"}, | |
68 {input:"@a"}, | |
69 {input:"@1"}, | |
70 {input:"@1a"}, | |
71 {input:'"a"'}, | |
72 {input:'"1"'}, | |
73 {input:'"1a"'}, | |
74 {input:"url(1)"}, | |
75 {input:"url('1')"}, | |
76 {input:"#1"}, | |
77 {input:"#01"}, | |
78 {input:"#001"}, | |
79 {input:"#0001"}, | |
80 {input:"#00001"}, | |
81 {input:"#000001"}, | |
82 {input:"+/**/1"}, | |
83 {input:"-/**/1"}, | |
84 {input:"calc(1)"}, | |
85 {input:"calc(2 * 2px)", q:"4px", s:"4px"}, | |
86 {input:"1px 2", q:"1px 2px", shorthand:true}, | |
87 {input:"1 2px", q:"1px 2px", shorthand:true}, | |
88 {input:"1px calc(2)", shorthand:true}, | |
89 {input:"calc(1) 2px", shorthand:true}, | |
90 {input:"1 +2", q:"1px 2px", shorthand:true}, | |
91 {input:"1 -2", q:"1px -2px", shorthand:true}, | |
92 ]; | |
93 | |
94 var props = [ | |
95 {prop:'background-position', check:'background-position', check_also:[]}
, | |
96 {prop:'border-spacing', check:'border-spacing', check_also:[]}, | |
97 {prop:'border-top-width', check:'border-top-width'}, | |
98 {prop:'border-right-width', check:'border-right-width'}, | |
99 {prop:'border-bottom-width', check:'border-bottom-width'}, | |
100 {prop:'border-left-width', check:'border-left-width'}, | |
101 {prop:'border-width', check:'border-top-width', check_also:['border-righ
t-width', 'border-bottom-width', 'border-left-width']}, | |
102 {prop:'bottom', check:'bottom'}, | |
103 {prop:'clip', check:'clip'}, | |
104 {prop:'font-size', check:'font-size'}, | |
105 {prop:'height', check:'height'}, | |
106 {prop:'left', check:'left'}, | |
107 {prop:'letter-spacing', check:'letter-spacing'}, | |
108 {prop:'margin-right', check:'margin-right'}, | |
109 {prop:'margin-left', check:'margin-left'}, | |
110 {prop:'margin-top', check:'margin-top'}, | |
111 {prop:'margin-bottom', check:'margin-bottom'}, | |
112 {prop:'margin', check:'margin-top', check_also:['margin-right', 'margin-
bottom', 'margin-left']}, | |
113 {prop:'max-height', check:'max-height'}, | |
114 {prop:'max-width', check:'max-width'}, | |
115 {prop:'min-height', check:'min-height'}, | |
116 {prop:'min-width', check:'min-width'}, | |
117 {prop:'padding-top', check:'padding-top'}, | |
118 {prop:'padding-right', check:'padding-right'}, | |
119 {prop:'padding-bottom', check:'padding-bottom'}, | |
120 {prop:'padding-left', check:'padding-left'}, | |
121 {prop:'padding', check:'padding-top', check_also:['padding-right', 'padd
ing-bottom', 'padding-left']}, | |
122 {prop:'right', check:'right'}, | |
123 {prop:'text-indent', check:'text-indent'}, | |
124 {prop:'top', check:'top'}, | |
125 {prop:'vertical-align', check:'vertical-align'}, | |
126 {prop:'width', check:'width'}, | |
127 {prop:'word-spacing', check:'word-spacing'}, | |
128 ]; | |
129 var style_template = '#test{border-style:solid;position:relative;{prop}:
{test};}' + | |
130 '#ref{border-style:solid;position:relative;{prop}:{
ref};}'; | |
131 | |
132 tests.forEach(function(t) { | |
133 var test_q = async_test(t.input + ' (quirks)'); | |
134 var test_a = async_test(t.input + ' (almost standards)'); | |
135 var test_s = async_test(t.input + ' (standards)'); | |
136 for (var i in props) { | |
137 if (t.shorthand && !(props[i].check_also)) { | |
138 continue; | |
139 } | |
140 test_q.step(function() { | |
141 q.style.textContent = style_template.replace('{test}', t.inp
ut) | |
142 .replace('{ref}', t.q).replace(/\{prop\}/g, prop
s[i].prop) | |
143 .replace(/clip:[^;]+/g, function(match) { | |
144 return 'clip:rect(auto, auto, auto, ' + matc
h.substr(5) + ')'; | |
145 }); | |
146 assert_equals(q.getComputedStyle(q.test).getPropertyValue(pr
ops[i].check), | |
147 q.getComputedStyle(q.ref).getPropertyValue(pro
ps[i].check), | |
148 props[i].prop); | |
149 if (t.shorthand && props[i].check_also) { | |
150 for (var j in props[i].check_also) { | |
151 assert_equals(q.getComputedStyle(q.test).getProperty
Value(props[i].check_also[j]), | |
152 q.getComputedStyle(q.ref).getPropertyV
alue(props[i].check_also[j]), | |
153 props[i].prop + ', checking ' + props[
i].check_also[j]); | |
154 } | |
155 } | |
156 }); | |
157 test_a.step(function() { | |
158 a.style.textContent = style_template.replace('{test}', t.inp
ut) | |
159 .replace('{ref}', t.s).replace(/\{prop\}/g, prop
s[i].prop) | |
160 .replace(/clip:[^;]+/g, function(match) { | |
161 return 'clip:rect(auto, auto, auto, ' + matc
h.substr(5) + ')'; | |
162 }); | |
163 assert_equals(a.getComputedStyle(a.test).getPropertyValue(pr
ops[i].check), | |
164 a.getComputedStyle(a.ref).getPropertyValue(pro
ps[i].check), | |
165 props[i].prop + ' in almost standards mode'); | |
166 if (t.shorthand && props[i].check_also) { | |
167 for (var j in props[i].check_also) { | |
168 assert_equals(a.getComputedStyle(a.test).getProperty
Value(props[i].check_also[j]), | |
169 a.getComputedStyle(a.ref).getPropertyV
alue(props[i].check_also[j]), | |
170 props[i].prop + ', checking ' + props[
i].check_also[j]); | |
171 } | |
172 } | |
173 }); | |
174 test_s.step(function() { | |
175 s.style.textContent = style_template.replace('{test}', t.inp
ut) | |
176 .replace('{ref}', t.s).replace(/\{prop\}/g, prop
s[i].prop) | |
177 .replace(/clip:[^;]+/g, function(match) { | |
178 return 'clip:rect(auto, auto, auto, ' + matc
h.substr(5) + ')'; | |
179 }); | |
180 assert_equals(s.getComputedStyle(s.test).getPropertyValue(pr
ops[i].check), | |
181 s.getComputedStyle(s.ref).getPropertyValue(pro
ps[i].check), | |
182 props[i].prop + ' in standards mode'); | |
183 if (t.shorthand && props[i].check_also) { | |
184 for (var j in props[i].check_also) { | |
185 assert_equals(s.getComputedStyle(s.test).getProperty
Value(props[i].check_also[j]), | |
186 s.getComputedStyle(s.ref).getPropertyV
alue(props[i].check_also[j]), | |
187 props[i].prop + ', checking ' + props[
i].check_also[j]); | |
188 } | |
189 } | |
190 }); | |
191 } | |
192 test_q.done(); | |
193 test_a.done(); | |
194 test_s.done(); | |
195 | |
196 }); | |
197 | |
198 var other_tests = [ | |
199 {input:'background:1 1', prop:'background-position'}, | |
200 {input:'border-top:red solid 1', prop:'border-top-width'}, | |
201 {input:'border-right:red solid 1', prop:'border-right-width'}, | |
202 {input:'border-bottom:red solid 1', prop:'border-bottom-width'}, | |
203 {input:'border-left:red solid 1', prop:'border-left-width'}, | |
204 {input:'border:red solid 1', prop:'border-top-width'}, | |
205 {input:'font:normal normal normal 40 sans-serif', prop:'font-size'}, | |
206 {input:'outline:red solid 1', prop:'outline-width'}, | |
207 {input:'outline-width:1', prop:'outline-width'}, | |
208 ]; | |
209 | |
210 var other_template = "#test{position:relative;outline-style:solid;{test}
}" + | |
211 "#ref{outline-style:solid}"; | |
212 | |
213 other_tests.forEach(function(t) { | |
214 test(function() { | |
215 q.style.textContent = other_template.replace('{test}', t.input); | |
216 assert_equals(q.getComputedStyle(q.test).getPropertyValue(t.prop
), | |
217 q.getComputedStyle(q.ref).getPropertyValue(t.prop)
, | |
218 'quirk was supported'); | |
219 }, 'Excluded property '+t.input); | |
220 }); | |
221 | |
222 done(); | |
223 } | |
224 </script> | |
225 </body> | |
226 </html> | |
OLD | NEW |