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

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 #gridWithNone {
   7     grid: none;
   8 }
   9 .gridWithTemplate {
  10     grid: 15px / 10px;
  11 }
  12 .gridWithInherit {
  13     grid: inherit;
  14 }
  15 #gridWithAutoFlowAndColumns {
  16     grid: column 10px;
  17 }
  18 #gridWithAutoFlowNone {
  19     grid: none 10px;
  20 }
  21 #gridWithAutoFlowColumnDense {
  22     grid: column dense 10px;
  23 }
  24 #gridWithAutoFlowDenseRow {
  25     grid: dense row 10px;
  26 }
  27 #gridWithAutoFlowAndColumnsAndRows {
  28     grid: column 10px / 20px;
  29 }
  30
  31 /* Bad values. */
  32
  33 #gridWithExplicitAndImplicit {
  34     grid: 10px / 20px column;
  35 }
  36 #gridWithMisplacedNone1 {
  37     grid: column 10px / none 20px;
  38 }
  39 #gridWithMisplacedNone2 {
  40     grid: 10px / 20px none;
  41 }
  42 #gridWithMisplacedDense {
  43     grid: dense column dense;
  44 }
  45 </style>
  46 <script src="../../resources/js-test.js"></script>
  47 </head>
  48 <body>
  49 <div class="grid" id="gridWithNone"></div>
  50 <div class="grid gridWithTemplate" id="gridWithTemplate"></div>
  51 <div class="grid gridWithTemplate">
  52     <div class="grid gridWithInherit" id="gridInherit"></div>
  53 </div>
  54 <div class="grid" class="gridWithTemplate">
  55     <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
  56 </div-->
  57 <div class="grid" id="gridWithAutoFlowAndColumns"></div>
  58 <div class="grid" id="gridWithAutoFlowNone"></div>
  59 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
  60 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
  61 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
  62 <div class="grid" id="gridWithExplicitAndImplicit"></div>
  63 <div class="grid" id="gridWithMisplacedNone1"></div>
  64 <div class="grid" id="gridWithMisplacedNone2"></div>
  65 <div class="grid" id="gridWithMisplacedDense"></div>
  66 <script src="resources/grid-shorthand-parsing-utils.js"></script>
  67 <script>
  68     description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.");
  69
  70     debug("Test getting the longhand values when shorthand is set through CSS.");
  71     testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "row", "auto", "auto");
  72     testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "row", "auto", "auto");
  73     testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "10px", "none", "row", "auto", "auto");
  74     testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
  75     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumns"), "none", "none", "none", "column", "10px", "10px");
  76     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "row", "auto", "auto");
  77     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDense"), "none", "none", "none", "column dense", "10px", "10px");
  78     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"), "none", "none", "none", "row dense", "10px", "10px");
  79     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumnsAndRows"), "none", "none", "none", "column", "10px", "20px");
  80
  81     debug("");
  82     debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
  83     testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "none", "none", "none", "row", "auto", "auto");
  84     testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
  85     testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
  86     testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
  87
  88     debug("");
  89     debug("Test getting and setting 'grid' shorthand through JS");
  90     testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
  91     testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
  92     testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "row dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
  93     testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");
  94
  95     debug("");
  96     debug("Test the initial value");
  97     var element = document.createElement("div");
  98     document.body.appendChild(element);
  99     testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "auto");
 100     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
 101     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
 102     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
 103     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
 104     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 105     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 106
 107     debug("");
 108     debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
 109     testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
 110     testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
 111
 112 </script>
 113 </body>
 114 </html>