5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 <link href="resources/grid.css" rel="stylesheet">
10 grid-template-columns: 50px 60px;
11 grid-template-rows: 20px 30px;
15 .firstRowFirstColumn {
20 .firstRowSecondColumn {
25 .secondRowFirstColumn {
30 .secondRowSecondColumn {
35 <script src="../../resources/check-layout.js"></script>
36 <body onload="checkLayout('.grid')">
38 <p>Test some simple grid layouts by positioning grid items by index.</p>
40 <!-- FIXME: The offsets assumes that grid-{column|row}-align are set to 'start', not 'stretch' (the default). Fix
41 them once we properly implement stretching / alignment. -->
42 <div style="position: relative">
43 <div class="grid" data-expected-width="110" data-expected-height="50">
44 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
45 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
46 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
47 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
51 <div style="position: relative">
52 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="110" data-expected-height="50">
53 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="35"></div>
54 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="35"></div>
55 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="15"></div>
56 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="15"></div>
60 <div style="position: relative">
61 <div class="grid" style="-webkit-writing-mode: vertical-rl; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
62 <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0"></div>
63 <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="50"></div>
64 <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
65 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
69 <div style="position: relative">
70 <div class="grid" style="-webkit-writing-mode: vertical-lr; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
71 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
72 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50"></div>
73 <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
74 <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>