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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years 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
« third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/place-cell-by-index.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
4 <link href="resources/grid.css" rel="stylesheet"> 6 <link href="resources/grid.css" rel="stylesheet">
5 <style> 7 <style>
6 .grid { 8 .grid {
7 grid-template-columns: 20% 50% 30%; 9 grid-template-columns: 20% 50% 30%;
8 grid-template-rows: 40%; 10 grid-template-rows: 40%;
9 } 11 }
10 12
11 .fixedSize { 13 .fixedSize {
12 width: 400px; 14 width: 400px;
13 height: 400px; 15 height: 400px;
14 } 16 }
15 17
16 .calculatedSize { 18 .calculatedSize {
17 width: calc(200px + 20%); 19 width: calc(200px + 20%);
18 height: calc(300px + 10%); 20 height: calc(300px + 10%);
19 } 21 }
20 22
21 .percentageSize { 23 .percentageSize {
22 width: 50%; 24 width: 50%;
23 height: 50%; 25 height: 50%;
24 } 26 }
25 27
26 .indefiniteSize { 28 .indefiniteHeight {
27 width: -webkit-fit-content;
28 height: auto; 29 height: auto;
Manuel Rego 2015/12/02 09:31:02 height is "auto" by default, I don't think you nee
jfernandez 2015/12/03 15:06:11 Yes, we do need it. The issue is when we setup fit
Manuel Rego 2015/12/04 13:12:43 True as you're using both width-keyword-classes.cs
svillar 2015/12/04 13:18:31 In this case I also think is better to explicitly
29 } 30 }
30 31
31 .fitContentSize {
32 width: fit-content;
33 height: fit-content;
34 }
35
36 .firstRowFirstColumn { 32 .firstRowFirstColumn {
37 color: blue; 33 color: blue;
38 background-color: cyan; 34 background-color: cyan;
39 } 35 }
40 36
41 .firstRowSecondColumn { 37 .firstRowSecondColumn {
42 color: green; 38 color: green;
43 background-color: lime; 39 background-color: lime;
44 } 40 }
45 41
46 .firstRowThirdColumn { 42 .firstRowThirdColumn {
47 color: brown; 43 color: brown;
48 background-color: yellow; 44 background-color: yellow;
49 grid-column: 3; 45 grid-column: 3;
50 grid-row: 1; 46 grid-row: 1;
51 } 47 }
52 </style> 48 </style>
53 <script src="../../resources/check-layout.js"></script> 49 <script src="../../resources/check-layout.js"></script>
54 </head> 50 </head>
55 <body onload="checkLayout('.grid');"> 51 <body onload="checkLayout('.grid');">
56 <p>This test checks percentage track breadths are resolved properly regardin g the container size.</p> 52 <p>This test checks percentage track breadths are resolved properly regardin g the container size.</p>
57 <div class="unconstrainedContainer"> 53 <div class="unconstrainedContainer">
58 <div class="grid"> 54 <div class="grid">
59 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="200" data-expected-height="10">XX</div> 55 <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> 56 <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> 57 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="300" data-expected-height="10">XXX</div>
62 </div> 58 </div>
63 </div> 59 </div>
64 60
65 <div class="indefiniteSize"> 61 <div class="fit-content indefiniteHeight">
66 <div class="grid"> 62 <div class="grid">
67 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 63 <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> 64 <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> 65 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
70 </div> 66 </div>
71 </div> 67 </div>
72 68
73 <div class="unconstrainedContainer"> 69 <div class="unconstrainedContainer">
74 <div class="grid fixedSize"> 70 <div class="grid fixedSize">
75 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="80" data-expected-height="160">XX</div> 71 <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> 72 <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> 73 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="120" data-expected-height="160">XXX</div>
78 </div> 74 </div>
79 </div> 75 </div>
80 76
81 <div class="indefiniteSize"> 77 <div class="indefiniteHeight">
82 <div class="grid fixedSize"> 78 <div class="grid fixedSize">
83 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="80" data-expected-height="160">XX</div> 79 <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> 80 <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> 81 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="120" data-expected-height="160">XXX</div>
86 </div> 82 </div>
87 </div> 83 </div>
88 84
89 <div class="indefiniteSize"> 85 <div class="fit-content indefiniteHeight">
90 <div class="grid calculatedSize"> 86 <div class="grid calculatedSize">
91 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 87 <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> 88 <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> 89 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
94 </div> 90 </div>
95 </div> 91 </div>
96 92
97 <div class="unconstrainedContainer"> 93 <div class="unconstrainedContainer">
98 <div class="grid calculatedSize"> 94 <div class="grid calculatedSize">
99 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="80" data-expected-height="160">XX</div> 95 <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> 96 <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> 97 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="120" data-expected-height="160">XXX</div>
102 </div> 98 </div>
103 </div> 99 </div>
104 100
105 <div class="indefiniteSize"> 101 <div class="fit-content indefiniteHeight">
106 <div class="grid percentageSize"> 102 <div class="grid percentageSize">
107 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 103 <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> 104 <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> 105 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
110 </div> 106 </div>
111 </div> 107 </div>
112 108
113 <div class="unconstrainedContainer"> 109 <div class="unconstrainedContainer">
114 <div class="grid percentageSize"> 110 <div class="grid percentageSize">
115 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="100" data-expected-height="200">XX</div> 111 <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> 112 <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> 113 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="150" data-expected-height="200">XXX</div>
118 </div> 114 </div>
119 </div> 115 </div>
120 116
121 <div class="indefiniteSize"> 117 <div class="fit-content indefiniteHeight">
122 <div class="grid indefiniteSize"> 118 <div class="grid fit-content indefiniteHeight">
123 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 119 <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> 120 <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> 121 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
126 </div> 122 </div>
127 </div> 123 </div>
128 124
129 <div class="unconstrainedContainer"> 125 <div class="unconstrainedContainer">
130 <div class="grid indefiniteSize"> 126 <div class="grid fit-content indefiniteHeight">
131 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 127 <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> 128 <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> 129 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
134 </div> 130 </div>
135 </div> 131 </div>
136 132
137 <div class="indefiniteSize"> 133 <div class="indefiniteHeight fit-content">
138 <div class="grid fitContentSize"> 134 <div class="grid fit-content">
139 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 135 <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> 136 <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> 137 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
142 </div> 138 </div>
143 </div> 139 </div>
144 140
145 <div class="unconstrainedContainer"> 141 <div class="unconstrainedContainer">
146 <div class="grid fitContentSize"> 142 <div class="grid fit-content">
147 <div class="firstRowFirstColumn sizedToGridArea" data-expected-width ="20" data-expected-height="10">XX</div> 143 <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> 144 <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> 145 <div class="firstRowThirdColumn sizedToGridArea" data-expected-width ="30" data-expected-height="10">XXX</div>
150 </div> 146 </div>
151 </div> 147 </div>
152 148
153 </body> 149 </body>
154 </html> 150 </html>
OLDNEW
« third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-height-auto-and-margins.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size-in-auto.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/place-cell-by-index.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css » ('J')

Powered by Google App Engine
This is Rietveld 408576698