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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/positioned-grid-items-sizing.html

Issue 2665133003: [css-grid] Fix behavior of positioned items without specific dimensions (Closed)
Patch Set: Applied suggested changes Created 3 years, 7 months 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <link rel="match" href="positioned-grid-items-sizing-expected.html">
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5
6 .grid {
7 grid: 25px 50px / 100px 60px;
8 margin: 1px 2px 3px 4px;
9 padding: 6px 3px 9px 12px;
10 border: solid;
11 border-width: 8px 2px 4px 6px;
12 font: 10px/1 Ahem;
13 float: left;
14 inline-size: 200px;
15 block-size: 100px;
16 /* Ensures that the grid container is the containing block of the absolutely p ositioned grid children. */
17 position: relative;
18 }
19
20 .grid > div {
21 position: absolute;
22 }
23
24
25 </style>
26
27 <p>This test checks that the sizing of positioned grid items without specific di mensions or offsets is equivalent to the size of regular items.</p>
28 <p>The test passes if it has the same output than the reference.</p>
29
30 <div class="grid">
31 <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
32 <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
33 <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
34 <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
35 </div>
36
37 <div class="grid directionRTL">
38 <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
39 <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
40 <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
41 <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
42 </div>
43
44 <div class="grid verticalLR">
45 <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
46 <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
47 <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
48 <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
49 </div>
50
51 <div class="grid verticalLR directionRTL">
52 <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
53 <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
54 <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
55 <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
56 </div>
57
58 <div class="grid verticalRL">
59 <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
60 <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
61 <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
62 <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
63 </div>
64
65 <div class="grid verticalRL directionRTL">
66 <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
67 <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
68 <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
69 <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
70 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698