LayoutTests/fast/css-grid-layout/grid-template-areas-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     -webkit-grid-template-areas: "area";
  12 }
  13
  14 #gridWithTwoColumnsTemplate {
  15     -webkit-grid-template-areas: "first second";
  16 }
  17
  18 #gridWithTwoRowsTemplate {
  19     -webkit-grid-template-areas: "first"
  20                                  "second";
  21 }
  22
  23 #gridWithSpanningColumnsTemplate {
  24     -webkit-grid-template-areas: "span span";
  25 }
  26
  27 #gridWithSpanningRowsDotTemplate {
  28     -webkit-grid-template-areas: "span"
  29                                  ".";
  30 }
  31
  32 #gridWithDotColumn {
  33     -webkit-grid-template-areas: "header ."
  34                                  "footer .";
  35 }
  36
  37 #gridWithHorizontalRectangle {
  38     -webkit-grid-template-areas: "a a a"
  39                                  "a a a";
  40 }
  41
  42 #gridWithVerticalRectangle {
  43     -webkit-grid-template-areas: "a a"
  44                                  "a a"
  45                                  "a a";
  46 }
  47
  48 </style>
  49 <script src="../../resources/js-test-pre.js"></script>
  50 </head>
  51 <body>
  52 <div class="grid" id="gridWithDefaultTemplate"></div>
  53 <div class="grid" id="gridWithSingleStringTemplate"></div>
  54 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
  55 <div class="grid" id="gridWithTwoRowsTemplate"></div>
  56 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
  57 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
  58 <div class="grid" id="gridWithDotColumn"></div>
  59 <div class="grid" id="gridWithHorizontalRectangle"></div>
  60 <div class="grid" id="gridWithVerticalRectangle"></div>
  61 <script>
  62     description("This test checks that grid-template-areas is properly parsed.");
  63
  64     function testGridTemplateAreas(gridItemID, expectedResult) {
  65         shouldBeEqualToString("getComputedStyle(" + gridItemID + ").getPropertyValue('-webkit-grid-template-areas')", expectedResult);
  66     }
  67
  68     function testJSGridTemplateAreas(element, expectedResult) {
  69         this.element = element;
  70         shouldBeEqualToString("getComputedStyle(element).getPropertyValue('-webkit-grid-template-areas')", expectedResult);
  71     }
  72
  73     debug("Test getting grid-template-areas set through CSS.");
  74     testGridTemplateAreas("gridWithDefaultTemplate", "none");
  75     testGridTemplateAreas("gridWithSingleStringTemplate", '"area"');
  76     testGridTemplateAreas("gridWithTwoColumnsTemplate", '"first second"');
  77     testGridTemplateAreas("gridWithTwoRowsTemplate", '"first" "second"');
  78     testGridTemplateAreas("gridWithSpanningColumnsTemplate", '"span span"');
  79     testGridTemplateAreas("gridWithSpanningRowsDotTemplate", '"span" "."');
  80     testGridTemplateAreas("gridWithDotColumn", '"header ." "footer ."');
  81     testGridTemplateAreas("gridWithHorizontalRectangle", '"a a a" "a a a"');
  82     testGridTemplateAreas("gridWithVerticalRectangle", '"a a" "a a" "a a"');
  83
  84     debug("Test grid-template-areas: initial");
  85     var element = document.createElement("div");
  86     document.body.appendChild(element);
  87     element.style.webkitGridTemplateAreas = "'foobar'";
  88     testJSGridTemplateAreas(element, '"foobar"');
  89     element.style.webkitGridTemplateAreas = "initial";
  90     document.body.removeChild(element);
  91
  92     debug("Test grid-template-areas: inherit");
  93     var parentElement = document.createElement("div");
  94     document.body.appendChild(parentElement);
  95     parentElement.style.webkitGridTemplateAreas = "'foo bar'";
  96     shouldBeEqualToString("getComputedStyle(parentElement).getPropertyValue('-webkit-grid-template-areas')", '"foo bar"');
  97
  98     var element = document.createElement("div");
  99     parentElement.appendChild(element);
 100     element.style.webkitGridTemplateAreas = "inherit";
 101     testJSGridTemplateAreas(element, '"foo bar"');
 102     document.body.removeChild(parentElement);
 103
 104     debug("Test invalid grid-template-areas values.");
 105     var element = document.createElement("div");
 106     document.body.appendChild(element);
 107
 108     // 'nav' is not a rectangular definition.
 109     element.style.webkitGridTemplateAreas = "'nav head' 'nav nav'";
 110     testJSGridTemplateAreas(element, "none");
 111
 112     // 'nav' is not contiguous in the column direction.
 113     element.style.webkitGridTemplateAreas = "'nav head nav'";
 114     testJSGridTemplateAreas(element, "none");
 115
 116     // 'nav' is not contiguous in the row direction.
 117     element.style.webkitGridTemplateAreas = "'nav head' 'middle middle' 'nav footer'";
 118     testJSGridTemplateAreas(element, "none");
 119
 120     // The rows don't have the same number of columns.
 121     element.style.webkitGridTemplateAreas = "'nav head' 'foot'";
 122     testJSGridTemplateAreas(element, "none");
 123
 124     // Empty rows.
 125     element.style.webkitGridTemplateAreas = "'' ''";
 126     testJSGridTemplateAreas(element, "none");
 127
 128     debug("");
 129     debug("FIXME: We currently don't validate that the named grid areas are &lt;indent&gt;.");
 130     // <ident> only allows a leading '-'.
 131     element.style.webkitGridTemplateAreas = "'nav-up'";
 132     testJSGridTemplateAreas(element, "none");
 133 </script>
 134 <script src="../../resources/js-test-post.js"></script>
 135 </body>
 136 </html>