Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(60)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html

Issue 2417853002: [css-grid] Implementing the grid's first line baseline. (Closed)
Patch Set: Patch rebased. Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <style>
5 body { margin: 0; }
6 .container {
7 position: relative;
8 font: 10px/1 Ahem;
9 border: 5px solid;
10 width: 470px;
11 }
12 .grid {
13 display: inline-grid;
14 grid-template-columns: 50px 50px;
15 width: 150px;
16 background-color: transparent;
17 position: relative;
18 }
19 .twoRows { grid-template-rows: 50px 50px; }
20 .threeRows { grid-template-rows: 50px 50px 50px; }
21 .empty {
22 border-color: black;
23 border-style: solid;
24 margin: 15px 0px 30px;
25 border-width: 5px 0px 10px;
26 padding: 10px 0px 20px;
27 }
28 .item {
29 height: 25px;
30 border-color: black;
31 border-style: solid;
32 }
33 .style1 {
34 border-width: 5px 0px 10px;
35 padding: 10px 0px 20px;
36 }
37 .style2 {
38 border-width: 10px 0px 5px;
39 padding: 20px 0px 10px;
40 margin-top: 10px;
41 }
42 .style3 {
43 border-width: 10px 0px 20px;
44 padding: 5px 0px 10px;
45 margin-top: 20px;
46 }
47
48 .bothRowFirstColumn, .secondRowSecondColumn {
49 margin-right: 10px;
50 margin-top: 10px;
51 margin-bottom: 10px;
52 background-color: pink;
53 }
54 .firstRowBothColumn, .secondRowBothColumn {
55 margin-top: 15px;
56 margin-bottom: 15px;
57 background-color: green;
58 }
59 </style>
60 <script src="../../resources/testharness.js"></script>
61 <script src="../../resources/testharnessreport.js"></script>
62 <script src="../../resources/check-layout-th.js"></script>
63 <body onload="checkLayout('.grid, container')">
64 <div id="log"></div>
65 <p>
66 The test shows 3 grids each of them with 3 items sorted differently in the D OM.<br>
67 Each grid container must use its first (grid order) item to compute its base line, and using document-oder in case of element with same grid-order. Hence the y might be baseline aligned each other accordingly.
68 </p>
69
70 <p>
71 This case shows 3 items located along the first row and in different columns , so grid baseline is computed using the one located at first column (blue item) .
72 </p>
73 <div class="container" data-expected-width="480" data-expected-height="120">
74 <div class="grid" data-offset-x="0" data-offset-y="20">
75 <div class="item style1 firstRowFirstColumn" data-offset-x="0" data-o ffset-y="0"></div>
76 <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-o ffset-y="10"></div>
77 <div class="item style3 firstRowThirdColumn" data-offset-x="100" data-o ffset-y="20"></div>
78 </div>
79 <div class="grid" data-offset-x="160" data-offset-y="10">
80 <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-o ffset-y="0"></div>
81 <div class="item style2 firstRowFirstColumn" data-offset-x="0" data-o ffset-y="10"></div>
82 <div class="item style3 firstRowSecondColumn" data-offset-x="50" data-o ffset-y="20"></div>
83 </div>
84 <div class="grid" data-offset-x="320" data-offset-y="0">
85 <div class="item style1 firstRowSecondColumn" data-offset-x="50" data-o ffset-y="0"></div>
86 <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-o ffset-y="10"></div>
87 <div class="item style3 firstRowFirstColumn" data-offset-x="0" data-o ffset-y="20"></div>
88 </div>
89 </div>
90
91 <p>
92 This case shows 3 items located along the first row and in different columns , so such item is used to determine the grid's baseline instead of using the gri d order.
93 </p>
94 <div class="container" data-expected-width="480" data-expected-height="120">
95 <div class="grid" data-offset-x="0" data-offset-y="0">
96 <div class="item style1 firstRowFirstColumn" data-offset-x="0" data-o ffset-y="0"></div>
97 <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-o ffset-y="10"></div>
98 <div class="item style3 firstRowThirdColumn alignSelfBaseline" data-off set-x="100" data-offset-y="20"></div>
99 </div>
100 <div class="grid" data-offset-x="160" data-offset-y="0">
101 <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-o ffset-y="0"></div>
102 <div class="item style2 firstRowFirstColumn" data-offset-x="0" data-o ffset-y="10"></div>
103 <div class="item style3 firstRowSecondColumn alignSelfBaseline" data-off set-x="50" data-offset-y="20"></div>
104 </div>
105 <div class="grid" data-offset-x="320" data-offset-y="20">
106 <div class="item style1 firstRowSecondColumn alignSelfBaseline" data-off set-x="50" data-offset-y="0"></div>
107 <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-o ffset-y="10"></div>
108 <div class="item style3 firstRowFirstColumn" data-offset-x="0" data-o ffset-y="20"></div>
109 </div>
110 </div>
111
112 <p>
113 This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
114 </p>
115 <div class="container" data-expected-width="480" data-expected-height="165">
116 <div class="grid twoRows" data-offset-x="0" data-offset-y="40">
117 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
118 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
119 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
120 </div>
121 <div class="grid twoRows" data-offset-x="160" data-offset-y="0">
122 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
123 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
124 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
125 </div>
126 <div class="grid twoRows" data-offset-x="320" data-offset-y="55">
127 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
128 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
129 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
130 </div>
131 </div>
132
133 <p>
134 This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
135 </p>
136 <div class="container" data-expected-width="480" data-expected-height="165">
137 <div class="grid twoRows" data-offset-x="0" data-offset-y="55">
138 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
139 <div class="firstRowBothColumn alignSelfBaseline" style="width: 100px; h eight: 20px;" data-offset-x="0" data-offset-y="15"></div>
140 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
141 </div>
142 <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
143 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
144 <div class="firstRowFirstColumn alignSelfBaseline" style="width: 50px; h eight: 50px;" data-offset-x="0" data-offset-y="0"></div>
145 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
146 </div>
147 <div class="grid twoRows" data-offset-x="320" data-offset-y="0">
148 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
149 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
150 <div class="bothRowFirstColumn alignSelfBaseline" style="width: 40px; he ight: 80px;" data-offset-x="0" data-offset-y="10"></div>
151 </div>
152 </div>
153
154 <p>
155 This case shows one of the grids with no items, hence its baseline must be s ynthesized.
156 </p>
157 <div class="container" data-expected-width="480" data-expected-height="200">
158 <div class="grid twoRows" data-offset-x="0" data-offset-y="80">
159 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
160 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
161 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
162 </div>
163 <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
164 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
165 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
166 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
167 </div>
168 <div class="grid empty twoRows" data-offset-x="320" data-offset-y="15">
169 </div>
170 </div>
171
172 <p>
173 This case shows one of the grids with no items in the first row, hence its b aseline must be synthesized.
174 </p>
175 <div class="container" data-expected-width="480" data-expected-height="250">
176 <div class="grid twoRows" data-offset-x="0" data-offset-y="130">
177 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
178 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
179 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
180 </div>
181 <div class="grid twoRows" data-offset-x="160" data-offset-y="90">
182 <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></ div>
183 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"> </div>
184 <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></ div>
185 </div>
186 <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
187 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60"> </div>
188 <div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="1 10"></div>
189 <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75">< /div>
190 </div>
191 </div>
192
193 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698