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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html

Issue 906323003: [CSS Grid Layout] Columns set in percentages collapse to auto width (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@sergio-indefinite
Patch Set: Created 5 years, 10 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
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt » ('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 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .grid {
7 grid-template-columns: 20% 50% 30%;
8 grid-template-rows: 40%;
9 }
10
11 .fixedSize {
12 width: 400px;
13 height: 400px;
14 }
15
16 .calculatedSize {
17 width: calc(200px + 20%);
18 height: calc(300px + 10%);
19 }
20
21 .percentageSize {
22 width: 50%;
23 height: 50%;
24 }
25
26 .indefiniteSize {
27 width: -webkit-fit-content;
28 height: auto;
29 }
30
31 .legacyIntrinsicSize {
32 width: intrinsic;
33 height: intrinsic;
34 }
35
36 .firstRowFirstColumn {
37 color: blue;
38 background-color: cyan;
39 }
40
41 .firstRowSecondColumn {
42 color: green;
43 background-color: lime;
44 }
45
46 .firstRowThirdColumn {
47 color: brown;
48 background-color: yellow;
49 grid-column: 3;
50 grid-row: 1;
51 }
52 </style>
53 <script src="../../resources/check-layout.js"></script>
54 </head>
55 <body onload="checkLayout('.grid');">
56 <p>This test checks percentage track breadths are resolved properly regardin g the container size.</p>
57 <div class="unconstrainedContainer">
58 <div class="grid">
59 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="200" data-expected-height="10">XX</div>
60 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="500" data-expected-height="10">XXXXX</div>
61 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="300" data-expected-height="10">XXX</div>
62 </div>
63 </div>
64
65 <div class="indefiniteSize">
66 <div class="grid">
67 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
68 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
69 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
70 </div>
71 </div>
72
73 <div class="unconstrainedContainer">
74 <div class="grid fixedSize">
75 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="80" data-expected-height="160">XX</div>
76 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="200" data-expected-height="160">XXXXX</div>
77 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="120" data-expected-height="160">XXX</div>
78 </div>
79 </div>
80
81 <div class="indefiniteSize">
82 <div class="grid fixedSize">
83 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="80" data-expected-height="160">XX</div>
84 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="200" data-expected-height="160">XXXXX</div>
85 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="120" data-expected-height="160">XXX</div>
86 </div>
87 </div>
88
89 <div class="indefiniteSize">
90 <div class="grid calculatedSize">
91 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
92 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
93 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
94 </div>
95 </div>
96
97 <div class="unconstrainedContainer">
98 <div class="grid calculatedSize">
99 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="80" data-expected-height="160">XX</div>
100 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="200" data-expected-height="160">XXXXX</div>
101 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="120" data-expected-height="160">XXX</div>
102 </div>
103 </div>
104
105 <div class="indefiniteSize">
106 <div class="grid percentageSize">
107 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
108 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
109 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
110 </div>
111 </div>
112
113 <div class="unconstrainedContainer">
114 <div class="grid percentageSize">
115 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="100" data-expected-height="200">XX</div>
116 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="250" data-expected-height="200">XXXXX</div>
117 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="150" data-expected-height="200">XXX</div>
118 </div>
119 </div>
120
121 <div class="indefiniteSize">
122 <div class="grid indefiniteSize">
123 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
124 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
125 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
126 </div>
127 </div>
128
129 <div class="unconstrainedContainer">
130 <div class="grid indefiniteSize">
131 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
132 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
133 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
134 </div>
135 </div>
136
137 <div class="indefiniteSize">
138 <div class="grid legacyIntrinsicSize">
139 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
140 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
141 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
142 </div>
143 </div>
144
145 <div class="unconstrainedContainer">
146 <div class="grid legacyIntrinsicSize">
147 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div>
148 <div class="firstRowSecondColumn sizedToGridArea" data-expected-widt h="50" data-expected-height="10">XXXXX</div>
149 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
150 </div>
151 </div>
152
153 </body>
154 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698