third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html

   1 <!DOCTYPE HTML>
   2 <link href="resources/grid.css" rel="stylesheet">
   3 <style>
   4 .grid {
   5     font: 50px/1 Ahem;
   6 }
   7
   8 .singleNamedGridLines {
   9     grid-template-columns: [a] auto [b];
  10     grid-template-rows: [x] auto [y];
  11 }
  12
  13 .multipleNamedGridLines {
  14     grid-template-columns: [a b c] auto [d e];
  15     grid-template-rows: [x y z] auto [v w];
  16 }
  17 </style>
  18 <script src="../../resources/js-test.js"></script>
  19
  20 <div class="grid singleNamedGridLines" id="gridOneColumnSingle">
  21     <div>XXXX</div>
  22     <div>XXX</div>
  23     <div>XX</div>
  24     <div>X</div>
  25 </div>
  26
  27 <div class="grid singleNamedGridLines" id="gridTwoColumnsSingle">
  28     <div class="firstRowAutoColumn">XXXX</div>
  29     <div class="firstRowAutoColumn">XXX</div>
  30     <div>XX</div>
  31     <div>X</div>
  32 </div>
  33
  34 <div class="grid singleNamedGridLines" id="gridThreeColumnsSingle">
  35     <div class="firstRowAutoColumn">XXXX</div>
  36     <div class="firstRowAutoColumn">XXX</div>
  37     <div class="firstRowAutoColumn">XX</div>
  38     <div>X</div>
  39 </div>
  40
  41 <div class="grid singleNamedGridLines" id="gridFourColumnsSingle">
  42     <div class="firstRowAutoColumn">XXXX</div>
  43     <div class="firstRowAutoColumn">XXX</div>
  44     <div class="firstRowAutoColumn">XX</div>
  45     <div class="firstRowAutoColumn">X</div>
  46 </div>
  47
  48 <div class="grid multipleNamedGridLines" id="gridOneColumnMultiple">
  49     <div>XXXX</div>
  50     <div>XXX</div>
  51     <div>XX</div>
  52     <div>X</div>
  53 </div>
  54
  55 <div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple">
  56     <div class="firstRowAutoColumn">XXXX</div>
  57     <div class="firstRowAutoColumn">XXX</div>
  58     <div>XX</div>
  59     <div>X</div>
  60 </div>
  61
  62 <div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple">
  63     <div class="firstRowAutoColumn">XXXX</div>
  64     <div class="firstRowAutoColumn">XXX</div>
  65     <div class="firstRowAutoColumn">XX</div>
  66     <div>X</div>
  67 </div>
  68
  69 <div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple">
  70     <div class="firstRowAutoColumn">XXXX</div>
  71     <div class="firstRowAutoColumn">XXX</div>
  72     <div class="firstRowAutoColumn">XX</div>
  73     <div class="firstRowAutoColumn">X</div>
  74 </div>
  75
  76 <script src="resources/grid-definitions-parsing-utils.js"></script>
  77 <script>
  78     description("Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks");
  79
  80     testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y] 50px 50px 50px");
  81     testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b] 150px", "[x] 50px [y] 50px");
  82     testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b] 150px 100px", "[x] 50px [y] 50px");
  83     testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b] 150px 100px 50px", "[x] 50px [y]");
  84
  85     testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px");
  86     testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px");
  87     testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px");
  88     testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]");
  89 </script>