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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .gridItem {
   7     grid-column: 1;
   8     grid-row: 1;
   9     height: 22px;
  10     width: 77px;
  11 }
  12 .gridWithFixed {
  13     grid-template-columns: [first] 10px;
  14     grid-template-rows: [first] 15px;
  15 }
  16 .gridWithPercent {
  17     grid-template-columns: 53% [last];
  18     grid-template-rows: 27% [last];
  19 }
  20 .gridWithAuto {
  21     grid-template-columns: [first] auto;
  22     grid-template-rows: auto [last];
  23 }
  24 .gridWithMinMax {
  25     grid-template-columns: [first] minmax(10%, 15px);
  26     grid-template-rows: minmax(20px, 50%) [last];
  27 }
  28 .gridWithFixedMultiple {
  29     grid-template-columns: [first nav] 10px [last];
  30     grid-template-rows: [first nav] 15px [last];
  31 }
  32 .gridWithPercentageSameStringMultipleTimes {
  33     grid-template-columns: [first nav] 10% [nav] 15% [last];
  34     grid-template-rows: [first nav2] 25% [nav2] 75% [last];
  35 }
  36 .gridWithRepeat {
  37     grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
  38     grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
  39 }
  40 .gridWithEmptyBrackets {
  41     grid-template-columns: [] 10px;
  42     grid-template-rows: 20px [ ] 50px [];
  43 }
  44 </style>
  45 <script src="../../resources/js-test.js"></script>
  46 </head>
  47 <body>
  48 <div class="gridWithFixed" id="gridWithFixedElement"></div>
  49 <div class="gridWithPercent" id="gridWithPercentElement"></div>
  50 <div class="gridWithAuto" id="gridWithAutoElement"></div>
  51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
  52     <div class="gridItem"></div>
  53 </div>
  54 <div class="gridWithMinMax" id="gridWithMinMax"></div>
  55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
  56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
  57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div>
  58 <div class="gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
  59
  60 <script src="resources/grid-definitions-parsing-utils.js"></script>
  61 <script>
  62     description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
  63
  64     debug("Test getting grid-template-columns and grid-template-rows set through CSS");
  65     testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
  66     testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% [last]", "27% [last]");
  67     testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] auto", "auto [last]");
  68     testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] minmax(10%, 15px)", "minmax(20px, 50%) [last]");
  69     testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
  70     testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 10% [nav] 15% [last]", "[first nav2] 25% [nav2] 75% [last]");
  71     testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 50% [nav nav2] 50%", "100px [nav nav2] 25% [nav nav2] 25% [last]");
  72     testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
  73
  74     debug("");
  75     debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
  76     testNonGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
  77     testNonGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 55%", "40% [last]", "[first] 55%", "40% [last]");
  78     testNonGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] auto", "auto [last]", "[first] auto", "auto [last]");
  79     testNonGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]");
  80     testNonGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]");
  81     testNonGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
  82     testNonGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "minmax(max-content, 50px) [last]");
  83     testNonGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "minmax(min-content, 50px) [last]");
  84     testNonGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
  85     testNonGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
  86     testNonGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");;
  87     testNonGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
  88
  89     debug("");
  90     debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
  91     element = document.createElement("div");
  92     document.body.appendChild(element);
  93     element.style.gridTemplateColumns = "'foo'";
  94     element.style.gridTemplateRows = "'bar";
  95     shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
  96     shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
  97
  98     element = document.createElement("div");
  99     document.body.appendChild(element);
 100     element.style.gridTemplateColumns = "'foo' 'bar'";
 101     element.style.gridTemplateRows = "'bar' 'foo'";
 102     shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
 103     shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
 104 </script>
 105 </body>
 106 </html>