shape-outside-shape-arguments-000.html (3509B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shape Outside Basic Shape Arguments</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/#typedef-basic-shape"> 9 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"> 10 <link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-css-values"> 11 <meta name="assert" content="A basic basic shape can contain any length unit type, or percentage"> 12 <meta name="flags" content="ahem dom"> 13 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script src="support/parsing-utils.js"></script> 17 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 18 </head> 19 <body> 20 <div id="log"></div> 21 <script type="text/javascript"> 22 // relative units: em, ex, ch, rem, vw, vh, vmin, vmax 23 // fixed units: cm, mm, in, px, pt, pc 24 // percentage unit: % 25 // zero length: 0 26 setup({explicit_done: true}); 27 var basic_shape_args_tests = [ 28 { 29 "name": "0-valued", 30 "actual": "polygon(nonzero, 0 0)", 31 "expected_inline": "polygon(0px 0px)", 32 "expected_computed": "polygon(0px 0px)" 33 }, 34 { 35 "name": "Font relative units", 36 "actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)", 37 "expected_inline": "polygon(1em 1ex, 1ch 1rem)", 38 "expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework 39 }, 40 { 41 "name": "View relative units", 42 "actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", 43 "expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)", 44 "expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework 45 }, 46 { 47 "name": "Fixed units", 48 "actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", 49 "expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)", 50 "expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework 51 }, 52 { 53 "name": "Percentage units", 54 "actual": "polygon(nonzero, 1% 2%)", 55 "expected_inline": "polygon(1% 2%)", 56 "expected_computed": "polygon(1% 2%)" 57 } 58 ]; 59 60 generate_tests( ParsingUtils.testInlineStyle, 61 ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") ); 62 ParsingUtils.setupFonts(); 63 document.fonts.load("10px Ahem").then(()=> { 64 generate_tests( ParsingUtils.testComputedStyle, 65 ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") ); 66 ParsingUtils.restoreFonts(); 67 done(); 68 }); 69 70 </script> 71 </body> 72 </html>