src/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 #gridWithAutoFlowAndColumns {
  13     grid: row 10px;
  14 }
  15 #gridWithAutoFlowNone {
  16     grid: none 10px;
  17 }
  18 #gridWithAutoFlowAndColumnsAndRows {
  19     grid: column 10px / 20px;
  20 }
  21
  22 /* Bad values. */
  23
  24 #gridWithExplicitAndImplicit {
  25     grid: 10px / 20px column;
  26 }
  27 #gridWithMisplacedNone1 {
  28     grid: column 10px / none 20px;
  29 }
  30 #gridWithMisplacedNone2 {
  31     grid: 10px / 20px none;
  32 }
  33 </style>
  34 <script src="../../resources/js-test.js"></script>
  35 </head>
  36 <body>
  37 <div class="grid" id="gridWithNone"></div>
  38 <div class="grid" id="gridWithTemplate"></div>
  39 <div class="grid" id="gridWithAutoFlowAndColumns"></div>
  40 <div class="grid" id="gridWithAutoFlowNone"></div>
  41 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
  42 <div class="grid" id="gridWithExplicitAndImplicit"></div>
  43 <div class="grid" id="gridWithMisplacedNone1"></div>
  44 <div class="grid" id="gridWithMisplacedNone2"></div>
  45 <script src="resources/grid-shorthand-parsing-utils.js"></script>
  46 <script>
  47     description("This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned.");
  48
  49     debug("Test getting the longhand values when shorthand is set through CSS.");
  50     testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "none", "none", "none", "auto", "auto");
  51     testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px", "10px", "none", "none", "auto", "auto");
  52     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumns"), "none", "none", "none", "row", "10px", "10px");
  53     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "none", "none", "none", "none", "10px", "10px");
  54     testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumnsAndRows"), "none", "none", "none", "column", "10px", "20px");
  55
  56     debug("");
  57     debug("Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none')");
  58     testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplicit"), "none", "none", "none", "none", "auto", "auto");
  59     testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "none", "auto", "auto");
  60     testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "none", "auto", "auto");
  61
  62     debug("");
  63     debug("Test getting and setting 'grid' shorthand through JS");
  64     testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "none", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
  65     testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20px", "\"a\"", "none", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", "initial", "initial");
  66     testGridDefinitionsSetJSValues("row 20px", "none", "none", "none", "row", "20px", "20px", "initial", "initial", "initial", "row", "20px", "20px");
  67     testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");
  68
  69     debug("");
  70     debug("Test the initial value");
  71     var element = document.createElement("div");
  72     document.body.appendChild(element);
  73     testGridDefinitionsValues(element, "none", "none", "none", "none", "auto", "auto");
  74     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "'none'");
  75     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "'none'");
  76     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-areas')", "'none'");
  77     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'");
  78     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
  79     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
  80
  81     debug("");
  82     debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
  83     testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
  84     testGridDefinitionsSetJSValues("none", "none", "none", "none", "none", "auto", "auto", "none", "none", "none", "initial", "initial", "initial");
  85
  86 </script>
  87 </body>
  88 </html>