1 <!DOCTYPE html>
2 <html><head>
3
4 <title>
5 CSS Values and Units Test:
6 Checks viewport units against CSS 2.1 properties and the CSSOM
7 </title>
8 <meta content="Testing what happens when one applies and rereads viewport unit lengths to CSS 2.1 properties that accept length values" name="assert">
9
10 <link href="mailto:schaepp@gmx.de" rel="author" title="Christian Schaefer">
11
12 <!-- You must have at least one spec link, but may have as many as are covered in the test. -->
13 <!-- Be sure to make the main testing area first in the order -->
14 <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
15
16 <!-- testharness inclusion for later submission -->
17 <script src="/resources/testharness.js"></script>
18 <script src="/resources/testharnessreport.js"></script>
19
20 <!-- testharness fallback for local testing -->
21 <script>
22 window.test || document.write('\
23 <script src="http://www.w3c-test.org/resources/testharness.js"><\/script>\
24 <script src="http://www.w3c-test.org/resources/testharnessreport.js"><\/script>\
25 ');
26 </script>
27
28 <style>
29
30 #div {
31 position: relative;
32 width: 50vw;
33 height: 10vw;
34 background: green;
35 border: 0 green solid;
36 font-size: 4vw;
37 }
38
39 #table td {
40 border: 1px solid green;
41 }
42
43 </style>
44
45 </head>
46 <body>
47 <div id="log"></div>
48
49 <p>
50 Checks viewport units. Also re-check with zoom in/out.
51 </p>
52
53 <div id="div">
54 Test the Web Forward!
55 </div>
56
57 <table id="table">
58 <tbody>
59 <tr>
60 <td id="td">Test</td>
61 <td>T</td>
62 <td>W</td>
63 <td>F</td>
64 </tr>
65 </tbody>
66 </table>
67
68 <script>
69
70 /* Boilerplate code */
71
72 var camelize = function (str) {
73 return str.replace(/\-(\w)/g, function(str, letter){
74 return letter.toUpperCase();
75 });
76 };
77
78 var retrieveComputedStyle = function(element,property){
79 var result =
80 document
81 .defaultView
82 .getComputedStyle(element,null)
83 .getPropertyValue(property);
84
85 // If there are multiple values, cut down to the first
86 result = result.split(' ')[0];
87
88 if(window.console) console.log('Retrieving ' + property + ' property. Result: ' + result);
89
90 return result;
91 }
92
93 var testit = function(element,vunit,property,expectedResult){
94
95 element.style[camelize(property)] = '0px';
96 element.style[camelize(property)] = lengthAmount + vunit;
97
98 if(window.console) console.log(element.nodeName.toLowerCase() + '.style.' + camelize(property) + ' = ' + lengthAmount + vunit);
99
100 var result = retrieveComputedStyle(element,property);
101
102 // Test against WebKit's getComputedStyle bug, where it does not return absolute values
103 // As required here: http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value
104 // If it returns a pixel value, but this value is 0px then it is considered a fail, too.
105 var px_result = result.search(/^[-\d\.]+px$/) !== -1 && result !== '0px' ? 'non-zero px-based value' : result;
106
107 // If browser returns pixel value, we compare against our expected pixel value
108 if(px_result === 'non-zero px-based value'){
109 test(function(){
110 assert_equals(Math.round(parseFloat(result.replace(/[^-\d\.]+/g,''))),expectedResult);
111 },vunit + ' length applied to ' + property);
112 }
113 // If not, we compare against the value we set initially
114 else {
115 test(function(){
116 assert_equals(result,lengthAmount + vunit);
117 },vunit + ' length applied to ' + property);
118 }
119
120 // Does the browser have a bug in getComputedStyle or not?
121 test(function(){
122 assert_equals(px_result,'non-zero px-based value');
123 },vunit + ' length applied to ' + property + ': getComputedStyle returns a non-zero px-based value');
124
125 element.style[camelize(property)] = '';
126 }
127
128 var lengthAmount = 10;
129 var layoutViewportWidth = document.documentElement.clientWidth;
130 var layoutViewportHeight = document.documentElement.clientHeight;
131
132 var viewportUnits = [
133 {
134 ident: 'vw',
135 expectedResult: Math.round(layoutViewportWidth * (lengthAmount / 100))
136 }
137 ,{
138 ident: 'vh',
139 expectedResult: Math.round(layoutViewportHeight * (lengthAmount / 100))
140 }
141 ,{
142 ident: 'vmin',
143 expectedResult: layoutViewportWidth < layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100))
144 }
145 ,{
146 ident: 'vmax',
147 expectedResult: layoutViewportWidth > layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100))
148 }
149 ]
150
151 // List of length accepting properties and which element they map to
152 // http://www.w3.org/TR/CSS21/propidx.html
153 var lengthAcceptingProperties = [
154 {
155 name: 'width',
156 element: 'div'
157 }
158 ,{
159 name: 'height',
160 element: 'div'
161 }
162 ,{
163 name: 'min-width',
164 element: 'div'
165 }
166 ,{
167 name: 'min-height',
168 element: 'div'
169 }
170 ,{
171 name: 'max-width',
172 element: 'div'
173 }
174 ,{
175 name: 'max-height',
176 element: 'div'
177 }
178 ,{
179 name: 'margin-top',
180 element: 'div'
181 }
182 ,{
183 name: 'padding-top',
184 element: 'div'
185 }
186 ,{
187 name: 'border-top-width',
188 element: 'div'
189 }
190 ,{
191 name: 'font-size',
192 element: 'div'
193 }
194 ,{
195 name: 'line-height',
196 element: 'div'
197 }
198 ,{
199 name: 'border-spacing',
200 element: 'table'
201 }
202 ,{
203 name: 'top',
204 element: 'div'
205 }
206 ,{
207 name: 'right',
208 element: 'div'
209 }
210 ,{
211 name: 'bottom',
212 element: 'div'
213 }
214 ,{
215 name: 'left',
216 element: 'div'
217 }
218 ,{
219 name: 'letter-spacing',
220 element: 'div'
221 }
222 ,{
223 name: 'text-indent',
224 element: 'div'
225 }
226 ,{
227 name: 'vertical-align',
228 element: 'td'
229 }
230 ,{
231 name: 'word-spacing',
232 element: 'div'
233 }
234 ];
235
236 var div = document.getElementById('div');
237 var table = document.getElementById('table');
238 var td = document.getElementById('td');
239
240 for(unitEntry in viewportUnits){
241 for(propertyEntry in lengthAcceptingProperties){
242
243 var vunit = viewportUnits[unitEntry].ident;
244 var expectedResult = viewportUnits[unitEntry].expectedResult;
245 var property = lengthAcceptingProperties[propertyEntry].name;
246 var element = window[lengthAcceptingProperties[propertyEntry].element];
247
248 testit(element,vunit,property,expectedResult);
249 }
250 }
251
252 </script>
253
254
255 </body></html>