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

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script>
   5 if (window.testRunner)
   6     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   7 </script>
   8 <link href="resources/grid.css" rel="stylesheet">
   9 <style>
  10 #gridWithSingleStringTemplate {
  11     grid-template: "area";
  12 }
  13
  14 #gridWithTwoColumnsTemplate {
  15     grid-template: "first second";
  16 }
  17
  18 #gridWithTwoRowsTemplate {
  19     grid-template: "first"
  20                    "second";
  21 }
  22
  23 #gridWithSpanningColumnsTemplate {
  24     grid-template: "span span";
  25 }
  26
  27 #gridWithSpanningRowsDotTemplate {
  28     grid-template: "span"
  29                    ".";
  30 }
  31
  32 #gridWithDotColumn {
  33     grid-template: "header ."
  34                    "footer .";
  35 }
  36 </style>
  37 <script src="../../resources/js-test.js"></script>
  38 </head>
  39 <body>
  40 <div class="grid" id="gridWithDefaultTemplate"></div>
  41 <div class="grid" id="gridWithSingleStringTemplate"></div>
  42 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
  43 <div class="grid" id="gridWithTwoRowsTemplate"></div>
  44 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
  45 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
  46 <div class="grid" id="gridWithDotColumn"></div>
  47 <script>
  48     description("This test checks that grid-template is properly parsed.");
  49
  50     debug("Test getting grid-template set through CSS.");
  51     var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTemplate");
  52     shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getPropertyValue('grid-template')", "none")
  53
  54     var gridWithSingleStringTemplate = document.getElementById("gridWithSingleStringTemplate");
  55     shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate).getPropertyValue('grid-template')", '"area"')
  56
  57     var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumnsTemplate");
  58     shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).getPropertyValue('grid-template')", '"first second"')
  59
  60     var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTemplate");
  61     shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getPropertyValue('grid-template')", '"first" "second"')
  62
  63     var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpanningColumnsTemplate");
  64     shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTemplate).getPropertyValue('grid-template')", '"span span"')
  65
  66     var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpanningRowsDotTemplate");
  67     shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTemplate).getPropertyValue('grid-template')", '"span" "."')
  68
  69     var gridWithDotColumn = document.getElementById("gridWithDotColumn");
  70     shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropertyValue('grid-template')", '"header ." "footer ."')
  71
  72     debug("Test grid-template: initial");
  73     var element = document.createElement("div");
  74     document.body.appendChild(element);
  75     element.style.gridTemplate = "'foobar'";
  76     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", '"foobar"')
  77     element.style.gridTemplate = "initial";
  78     document.body.removeChild(element);
  79
  80     debug("Test grid-template: inherit");
  81     var parentElement = document.createElement("div");
  82     document.body.appendChild(parentElement);
  83     parentElement.style.gridTemplate = "'foo bar'";
  84     shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyValue('grid-template')", '"foo bar"')
  85
  86     var element = document.createElement("div");
  87     parentElement.appendChild(element);
  88     element.style.gridTemplate = "inherit";
  89     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", '"foo bar"')
  90     document.body.removeChild(parentElement);
  91
  92     debug("Test invalid grid-template values.");
  93     var element = document.createElement("div");
  94     document.body.appendChild(element);
  95
  96     // 'nav' is not a rectangular definition.
  97     element.style.gridTemplate = "'nav head' 'nav nav'";
  98     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
  99
 100     // 'nav' is not contiguous in the column direction.
 101     element.style.gridTemplate = "'nav head nav'";
 102     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
 103
 104     // 'nav' is not contiguous in the row direction.
 105     element.style.gridTemplate = "'nav head' 'middle middle' 'nav footer'";
 106     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
 107
 108     // The rows don't have the same number of columns.
 109     element.style.gridTemplate = "'nav head' 'foot'";
 110     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
 111
 112     // Empty rows.
 113     element.style.gridTemplate = "'' ''";
 114     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
 115
 116     debug("");
 117     debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
 118     // <ident> only allows a leading '-'.
 119     element.style.gridTemplate = '"nav-up"';
 120     shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('grid-template')", "none")
 121 </script>
 122 </body>
 123 </html>