grid-area-computed.html (3023B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: getComputedStyle().gridArea</title> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#placement"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/computed-testcommon.js"></script> 10 <style> 11 #container { 12 container-type: inline-size; 13 width: 100px; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="container"> 19 <div id="target"></div> 20 </div> 21 <script> 22 // auto 23 test_computed_value("grid-area", "auto / auto / auto / auto", 24 ["auto", "auto / auto / auto / auto"]); 25 test_computed_value("grid-row", "auto / auto", ["auto", "auto / auto"]); 26 test_computed_value("grid-column-end", "auto"); 27 28 // <custom-ident> 29 test_computed_value("grid-row", "-zπ", [ "-zπ", "-zπ / -zπ"]); 30 test_computed_value("grid-row-start", "AZ"); 31 test_computed_value("grid-column-start", "-_π"); 32 test_computed_value("grid-row-end", "_9"); 33 34 35 // <integer> && <custom-ident>? 36 test_computed_value("grid-area", "1 / 90 -a- / auto / auto", 37 ["1 / 90 -a-", "1 / 90 -a- / auto / auto"]); 38 test_computed_value("grid-row", "2 az / auto", ["2 az", "2 az / auto"]); 39 test_computed_value("grid-column", "9 / -19 zA"); 40 test_computed_value("grid-row-start", "-19"); 41 test_computed_value("grid-row-start", "9 -Z_"); 42 test_computed_value("grid-column-start", "-44 Z"); 43 test_computed_value("grid-row-end", "1 -πA"); 44 test_computed_value("grid-column-end", "5 π_"); 45 test_computed_value("grid-row-start", "calc(1.1) -a-", "1 -a-"); 46 test_computed_value("grid-row-start", "calc(10) -a-", "10 -a-"); 47 test_computed_value("grid-row-start", "calc(10 + (sign(2cqw - 10px) * 5)) -a-", "5 -a-"); 48 49 // span && [ <integer> || <custom-ident> ] 50 test_computed_value("grid-area", "span 2 i / auto / auto / auto", 51 ["span 2 i", "span 2 i / auto / auto / auto"]); 52 test_computed_value("grid-row", "span 2 / auto", ["span 2", "span 2 / auto"]); 53 test_computed_value("grid-column-start", "span 1 i", "span i"); 54 test_computed_value("grid-row-start", "span 1"); 55 test_computed_value("grid-row-end", "span 2 i"); 56 test_computed_value("grid-column-end", "span 2"); 57 58 // https://github.com/w3c/csswg-drafts/issues/3448 59 test_computed_value("grid-row-start", "span i"); 60 test_computed_value("grid-row", "span i / auto", ["span i", "span i / auto"]); 61 62 // <grid-line> [ / <grid-line> ]{0,3} 63 test_computed_value("grid-area", "auto / i / auto / i", 64 ["auto / i", "auto / i / auto / i"]); 65 test_computed_value("grid-area", "auto / i / 2 j", 66 ["auto / i / 2 j", "auto / i / 2 j / i"]); 67 test_computed_value("grid-area", "auto / i / 2 j / span 3 k"); 68 test_computed_value("grid-row", "auto / i"); 69 test_computed_value("grid-column", "2 j / span 3 k"); 70 71 72 // https://github.com/w3c/csswg-drafts/issues/2858 73 test_computed_value("grid-column-end", "\\31st", "\\31 st"); 74 test_computed_value("grid-column-end", "\\31 st", "\\31 st"); 75 76 </script> 77 </body> 78 </html>