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