third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
   8     width: 800px;
   9     height: 600px;
  10 }
  11 .gridItem {
  12     grid-column: 1;
  13     grid-row: 1;
  14     height: 22px;
  15     width: 77px;
  16 }
  17 .gridWithFixed {
  18     grid-template-columns: [first] 10px;
  19     grid-template-rows: [first] 15px;
  20 }
  21 .gridWithPercent {
  22     grid-template-columns: 53% [last];
  23     grid-template-rows: 27% [last];
  24 }
  25 .gridWithAuto {
  26     grid-template-columns: [first] auto;
  27     grid-template-rows: auto [last];
  28 }
  29 .gridWithMinMax {
  30     grid-template-columns: [first] minmax(10%, 15px);
  31     grid-template-rows: minmax(20px, 50%) [last];
  32 }
  33 .gridWithFixedMultiple {
  34     grid-template-columns: [first nav] 10px [last];
  35     grid-template-rows: [first nav] 15px [last];
  36 }
  37 .gridWithPercentageSameStringMultipleTimes {
  38     grid-template-columns: [first nav] 10% [nav] 15% [last];
  39     grid-template-rows: [first nav2] 25% [nav2] 75% [last];
  40 }
  41 .gridWithRepeat {
  42     grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
  43     grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
  44 }
  45 .gridWithEmptyBrackets {
  46     grid-template-columns: [] 10px;
  47     grid-template-rows: 20px [ ] 50px [];
  48 }
  49 .gridWithoutBrackets {
  50     grid-template-columns: first nav 10px;
  51     grid-template-rows: first 50% last;
  52 }
  53 .gridWithInvalidNestedBrackets {
  54     grid-template-columns: [first [nav]] 10px [last];
  55     grid-template-rows: [first] 50% [last [nav] nav2];
  56 }
  57 .gridWithUnbalancedBrackets {
  58     grid-template-columns: [first nav 10px;
  59     grid-template-rows: [first] 50% last];
  60 }
  61 .gridWithMisplacedBrackets {
  62     grid-template-columns: [first 10px] 50%;
  63     grid-template-rows: [first] [nav 50%];
  64 }
  65 .gridWithContiguousBrackets {
  66     grid-template-columns: [first] [nav] 10px;
  67     grid-template-rows: 50px [nav nav2] [middle] 10px;
  68 }
  69 .gridWithInvalidCustomIdents {
  70     grid-template-columns: [first span] 10px;
  71     grid-template-rows: 50px [inherit] 10px;
  72 }
  73 </style>
  74 <script src="../../resources/js-test.js"></script>
  75 </head>
  76 <body>
  77 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
  78 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
  79 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
  80 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
  81     <div class="gridItem"></div>
  82 </div>
  83 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
  84 <div class="grid gridWithAuto" id="gridWithAutoWithChildrenElement">
  85     <div class="gridItem"></div>
  86 </div>
  87 <div class="grid gridWithMinMax" id="gridWithMinMax"></div>
  88 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
  89 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
  90 <div class="grid gridWithRepeat" id="gridWithRepeatElement"></div>
  91 <div class="grid gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
  92 <div class="grid gridWithoutBrackets" id="gridWithoutBrackets"></div>
  93 <div class="grid gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
  94 <div class="grid gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
  95 <div class="grid gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
  96 <div class="grid gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
  97 <div class="grid gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents"></div>
  98
  99 <script src="resources/grid-definitions-parsing-utils.js"></script>
 100 <script>
 101     description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
 102
 103     debug("Test getting grid-template-columns and grid-template-rows set through CSS");
 104     testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
 105     testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
 106     testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
 107     testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px [last]", "22px [last]");
 108     testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
 109     testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
 110     testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");
 111     testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
 112     testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [nav2] 450px [last]");
 113     testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav nav2] 150px [last]");
 114     testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
 115
 116     debug("");
 117     debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
 118     testGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
 119     testGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
 120     testGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
 121     testGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] 0px", "0px [last]", "[first] min-content", "min-content [last]");
 122     testGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] 0px", "0px [last]", "[first] max-content", "max-content [last]");
 123     testGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] 440px", "240px [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
 124     testGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]");
 125     testGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]");
 126     testGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] 0px", "0px [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
 127     testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] 0px [last]", "[first nav] 0px [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
 128     testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] 0px [nav] 0px [last]", "[first nav2] 0px [nav2] 15px [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");
 129     testGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
 130     testGridDefinitionsSetJSValues("[first] auto repeat(2, [foo bar] 20px)", "220px [foo] repeat(1, 50% [baz]", "[first] 0px [foo bar] 20px [foo bar] 20px", "220px [foo] 300px [baz]", "[first] auto [foo bar] 20px [foo bar] 20px", "220px [foo] 50% [baz]");
 131
 132     debug("");
 133     debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
 134     testGridDefinitionsValues(document.getElementById("gridWithoutBrackets"), "none", "none");
 135     testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedBrackets"), "none", "none");
 136     testGridDefinitionsValues(document.getElementById("gridWithUnbalancedBrackets"), "none", "none");
 137     testGridDefinitionsValues(document.getElementById("gridWithMisplacedBrackets"), "none", "none");
 138     testGridDefinitionsValues(document.getElementById("gridWithContiguousBrackets"), "none", "none");
 139     testGridDefinitionsValues(document.getElementById("gridWithInvalidCustomIdents"), "none", "none");
 140
 141     debug("");
 142     debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
 143     testGridDefinitionsSetBadJSValues("[foo]", "[bar");
 144     testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]");
 145     testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
 146     testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2em");
 147     testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em");
 148     testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]");
 149     testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]");
 150 </script>
 151 </body>
 152 </html>