third_party/WebKit/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-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 .singleSingleTrackRepeat {
   7     grid-template-rows: repeat(1, 18px);
   8     grid-template-columns: repeat(1, 15%);
   9 }
  10
  11 .twoSingleTrackRepeat {
  12     grid-template-rows: repeat(2, auto);
  13     grid-template-columns: repeat(2, minmax(15px, 50%));
  14 }
  15
  16 .twoDoubleTrackRepeat {
  17     grid-template-rows: repeat(2, minmax(5px, 10px)  auto);
  18     grid-template-columns: repeat(2, auto minmax(100px, 120px));
  19 }
  20
  21 .twoDoubleTrackWithNamedGridLineRepeat {
  22     grid-template-rows: repeat(2, 10px [start] auto [end]);
  23     grid-template-columns: repeat(2, auto [middle] 250px [end]);
  24 }
  25
  26 .twoDoubleTrackWithTrailingNamedGridLineRepeat {
  27     grid-template-rows: repeat(2, [before] 10px);
  28     grid-template-columns: repeat(2, [before] auto);
  29 }
  30
  31 .trailingNamedGridLineRepeat {
  32     grid-template-rows: repeat(1, 10px) [end];
  33     grid-template-columns: repeat(1, 250px) [end];
  34 }
  35
  36 .leadingNamedGridLineRepeat {
  37     grid-template-rows: [start] repeat(2, 10px);
  38     grid-template-columns: [start] repeat(2, 250px);
  39 }
  40
  41 .mixRepeatAfterNonRepeat {
  42     grid-template-rows: auto repeat(2, 10px);
  43     grid-template-columns: [start] 140px repeat(2, 250px);
  44 }
  45
  46 .mixNonRepeatAfterRepeat {
  47     grid-template-rows: repeat(2, 10px) [end] auto;
  48     grid-template-columns: repeat(2, 250px) 15% [last];
  49 }
  50 </style>
  51 <script src="../../resources/js-test.js"></script>
  52 </head>
  53 <body>
  54 <div class="singleSingleTrackRepeat" id="singleSingleTrackRepeat"></div>
  55 <div class="twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
  56 <div class="twoDoubleTrackRepeat" id="twoDoubleTrackRepeat"></div>
  57 <div class="twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGridLineRepeat"></div>
  58 <div class="twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
  59 <div class="trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
  60 <div class="leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
  61 <div class="mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"></div>
  62 <div class="mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
  63
  64 <script src="resources/grid-definitions-parsing-utils.js"></script>
  65 <script>
  66     description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');
  67
  68     debug("Test getting grid-template-columns and grid-template-rows set through CSS");
  69     testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeat"), "15%", "18px");
  70     testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "minmax(15px, 50%) minmax(15px, 50%)", "auto auto");
  71     testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "auto minmax(100px, 120px) auto minmax(100px, 120px)", "minmax(5px, 10px) auto minmax(5px, 10px) auto");
  72     testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "auto [middle] 250px [end] auto [middle] 250px [end]", "10px [start] auto [end] 10px [start] auto [end]");
  73     testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "[before] auto [before] auto", "[before] 10px [before] 10px");
  74     testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px [end]", "10px [end]");
  75     testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] 250px 250px", "[start] 10px 10px");
  76     testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px 250px 250px", "auto 10px 10px");
  77     testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 15% [last]", "10px 10px [end] auto");
  78
  79     debug("");
  80     debug("Test invalid repeat syntax.");
  81     function testInvalidSyntax(gridColumn) {
  82         element = document.createElement("div");
  83         document.body.appendChild(element);
  84         element.style.gridTemplateColumns = gridColumn;
  85         shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
  86         document.body.removeChild(element);
  87     }
  88     testInvalidSyntax("repeat(");
  89     testInvalidSyntax("repeat()");
  90     testInvalidSyntax("repeat(3 / auto)");
  91     testInvalidSyntax("repeat(3 , ,)");
  92     testInvalidSyntax("repeat(0, 15px)");
  93     testInvalidSyntax("repeat(-1, auto)");
  94     // Nesting is no allowed.
  95     testInvalidSyntax("repeat(2, repeat(1, auto))");
  96 </script>
  97 </body>
  98 </html>