shape-outside-computed-shape-000.html (2466B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shape Outside Basic Shape Computed Font Relative Lengths</title> 5 <link rel="author" title="Adobe" href="http://html.adobe.com/"> 6 <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> 7 <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 --> 8 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> 9 <link rel="help" href="http://www.w3.org/TR/css-cascade-3/#computed"> 10 <meta name="assert" content="The basic shape can contain relative length formats, which resolve to the computed (absolute) length value"> 11 <meta name="flags" content="ahem dom"> 12 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="support/parsing-utils.js"></script> 16 </head> 17 <body> 18 <div id="log"></div> 19 <script type="text/javascript"> 20 // font relative units: em, ex, ch, rem 21 var units = ['em', 'ex', 'ch', 'rem']; 22 var resolveds = {}; 23 ParsingUtils.setupFonts(); 24 25 var div = document.createElement('div'); 26 document.body.appendChild(div); 27 units.forEach(function(unit) { 28 div.style.width = '10' + unit; 29 var s = getComputedStyle(div); 30 resolveds[unit] = parseFloat(s.width); 31 }); 32 document.body.removeChild(div); 33 34 function fillArray(string, length) { 35 return Array.apply(null, new Array(length)).map(String.prototype.valueOf, string); 36 } 37 38 function testUnit(unit) { 39 var relativeLength = '1' + unit; 40 var usedLength = resolveds[unit] + 'px'; 41 42 var input = 'polygon(nonzero, ' + fillArray('10' + unit, 2).join(' ') + ')'; 43 var output = 'polygon(' + fillArray(resolveds[unit] + 'px', 2).join(' ') + ')'; 44 45 ParsingUtils.testComputedStyle(input, ParsingUtils.roundResultStr(output)); 46 } 47 48 var tests = units.map(function(unit) { 49 return [unit + ' units', unit]; 50 }); 51 52 generate_tests(testUnit, tests); 53 54 ParsingUtils.restoreFonts(); 55 </script> 56 </body> 57 </html>