src/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 .gridWithEmptyParentheses {
  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="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></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("gridWithEmptyParentheses"), "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>