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