third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthands-style-format.html

   1 <!DOCTYPE html>
   2 <link href="resources/grid.css" rel="stylesheet">
   3 <div class="grid">
   4     <div id="item"></div>
   5 </div>
   6 <script src="../../resources/js-test.js"></script>
   7 <script>
   8     description('Test that the format of grid shorthands style uses slashes as expected');
   9
  10     var item = document.getElementById("item");
  11
  12     debug("Test grid-column shorthand");
  13     item.style.gridColumn = "1";
  14     shouldBeEqualToString("item.style.gridColumn", "1 / auto");
  15     item.style.gridColumn = "1 / 3";
  16     shouldBeEqualToString("item.style.gridColumn", "1 / 3");
  17     item.style.gridColumn = "1 / span 2";
  18     shouldBeEqualToString("item.style.gridColumn", "1 / span 2");
  19     item.style.gridColumn = "foo / bar";
  20     shouldBeEqualToString("item.style.gridColumn", "foo / bar");
  21     item.style.gridColumn = "foo / span bar";
  22     shouldBeEqualToString("item.style.gridColumn", "foo / span bar");
  23     item.style.gridColumn = "2 foo / span 3 bar";
  24     shouldBeEqualToString("item.style.gridColumn", "2 foo / span 3 bar");
  25
  26     debug("Test grid-row shorthand");
  27     item.style.gridRow = "1";
  28     shouldBeEqualToString("item.style.gridRow", "1 / auto");
  29     item.style.gridRow = "1 / 3";
  30     shouldBeEqualToString("item.style.gridRow", "1 / 3");
  31     item.style.gridRow = "1 / span 2";
  32     shouldBeEqualToString("item.style.gridRow", "1 / span 2");
  33     item.style.gridRow = "foo / bar";
  34     shouldBeEqualToString("item.style.gridRow", "foo / bar");
  35     item.style.gridRow = "foo / span bar";
  36     shouldBeEqualToString("item.style.gridRow", "foo / span bar");
  37     item.style.gridRow = "2 foo / span 3 bar";
  38     shouldBeEqualToString("item.style.gridRow", "2 foo / span 3 bar");
  39
  40     debug("Test grid-area shorthand");
  41     item.style.gridArea = "1";
  42     shouldBeEqualToString("item.style.gridArea", "1 / auto / auto / auto");
  43     item.style.gridArea = "1 / 3";
  44     shouldBeEqualToString("item.style.gridArea", "1 / 3 / auto / auto");
  45     item.style.gridArea = "1 / span 2";
  46     shouldBeEqualToString("item.style.gridArea", "1 / span 2 / auto / auto");
  47     item.style.gridArea = "foo / foo";
  48     shouldBeEqualToString("item.style.gridArea", "foo / foo / foo / foo");
  49     item.style.gridArea = "foo / bar";
  50     shouldBeEqualToString("item.style.gridArea", "foo / bar / foo / bar");
  51     item.style.gridArea = "2 foo / span 3 bar";
  52     shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / auto / auto");
  53     item.style.gridArea = "1 / 2 / 3";
  54     shouldBeEqualToString("item.style.gridArea", "1 / 2 / 3 / auto");
  55     item.style.gridArea = "1 / 3 / 2 / 4";
  56     shouldBeEqualToString("item.style.gridArea", "1 / 3 / 2 / 4");
  57     item.style.gridArea = "1 / span 2 / 1 / span 2";
  58     shouldBeEqualToString("item.style.gridArea", "1 / span 2 / 1 / span 2");
  59     item.style.gridArea = "foo / bar / baz / qux";
  60     shouldBeEqualToString("item.style.gridArea", "foo / bar / baz / qux");
  61     item.style.gridArea = "foo / span bar / baz / span qux";
  62     shouldBeEqualToString("item.style.gridArea", "foo / span bar / baz / span qux");
  63     item.style.gridArea = "2 foo / span 3 bar / 3 baz / span 2 qux";
  64     shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / 3 baz / span 2 qux");
  65
  66 </script>