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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html

Issue 946553003: [CSS Grid Layout] Avoid reset override logical width/height for non relative elements (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing Created 5 years, 9 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/grid-item-with-percent-height-in-auto-height-grid-resolution-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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .gridMinMaxMinMax { 5 .gridMinMaxMinMax {
6 grid-template-columns: 50px 100px; 6 grid-template-columns: 50px 100px;
7 grid-template-rows: minmax(10px, min-content) minmax(50px, 100px); 7 grid-template-rows: minmax(10px, min-content) minmax(50px, 100px);
8 } 8 }
9 9
10 .gridAutoAuto { 10 .gridAutoAuto {
11 grid-template-columns: 50px 100px; 11 grid-template-columns: 50px 100px;
12 grid-template-rows: auto auto; 12 grid-template-rows: auto auto;
13 } 13 }
14
15 .sizedToGridAreaMinSizes {
16 font: 10px/1 Ahem;
17 min-width: 100%;
18 min-height: 100%;
19 }
20
21 .sizedToGridAreaMaxSizes {
22 font: 10px/1 Ahem;
23 max-width: 100%;
24 max-height: 100%;
25 }
14 </style> 26 </style>
15 <script src="../../resources/check-layout.js"></script> 27 <script src="../../resources/check-layout.js"></script>
16 <body onload="checkLayout('.grid')"> 28 <body onload="checkLayout('.grid')">
17 29
18 <p>Test that grid items with a percentage logical height inside a grid without e xplicit sizes resolve their size properly.</p> 30 <p>Test that grid items with a percentage logical height inside a grid without e xplicit sizes resolve their size properly.</p>
19 31
20 <div class="unconstrainedContainer" style="position: relative"> 32 <div class="unconstrainedContainer" style="position: relative">
21 <div class="grid gridMinMaxMinMax"> 33 <div class="grid gridMinMaxMinMax">
22 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" da ta-expected-height="20">XXXXX XXXXXX</div> 34 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" da ta-expected-height="20">XXXXX XXXXXX</div>
23 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> 35 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
(...skipping 22 matching lines...) Expand all
46 58
47 <div class="unconstrainedContainer" style="position: relative"> 59 <div class="unconstrainedContainer" style="position: relative">
48 <div class="grid gridAutoAuto"> 60 <div class="grid gridAutoAuto">
49 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" da ta-expected-height="30">XXXXX XXXXXX</div> 61 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" da ta-expected-height="30">XXXXX XXXXXX</div>
50 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div> 62 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
51 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" d ata-expected-height="40">XXXXX XXXXXX</div> 63 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" d ata-expected-height="40">XXXXX XXXXXX</div>
52 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div> 64 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
53 </div> 65 </div>
54 </div> 66 </div>
55 67
68 <div class="unconstrainedContainer" style="position: relative">
69 <div class="grid gridMinMaxMinMax">
70 <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="20">XXXXX XXXXXX</div>
71 <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="20">XXXXX XXXXXX</div>
72 <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="100">XXXXX XXXXXX</div>
73 <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="100">XXXXX XXXXXX</div>
74 </div>
75 </div>
76
77 <div style="position: relative; height: 100px;">
78 <div class="grid gridMinMaxMinMax">
79 <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="20">XXXXX XXXXXX</div>
80 <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="20">XXXXX XXXXXX</div>
81 <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="100">XXXXX XXXXXX</div>
82 <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="100">XXXXX XXXXXX</div>
83 </div>
84 </div>
85
86 <div style="position: relative;">
87 <div class="grid gridMinMaxMinMax" style="height: 100px;">
88 <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="20">XXXXX XXXXXX</div>
89 <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="20">XXXXX XXXXXX</div>
90 <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="80">XXXXX XXXXXX</div>
91 <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="80">XXXXX XXXXXX</div>
92 </div>
93 </div>
94
95 <div class="unconstrainedContainer" style="position: relative">
96 <div class="grid gridAutoAuto">
97 <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="30">XXXXX XXXXXX</div>
98 <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
99 <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="40">XXXXX XXXXXX</div>
100 <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
101 </div>
102 </div>
103
104 <div class="unconstrainedContainer" style="position: relative">
105 <div class="grid gridMinMaxMinMax">
106 <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="20">XXXXX XXXXXX</div>
107 <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="20">XXXXX XXXXXX</div>
108 <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="100">XXXXX XXXXXX</div>
109 <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="100">XXXXX XXXXXX</div>
110 </div>
111 </div>
112
113 <div style="position: relative; height: 100px;">
114 <div class="grid gridMinMaxMinMax">
115 <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="20">XXXXX XXXXXX</div>
116 <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="20">XXXXX XXXXXX</div>
117 <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="100">XXXXX XXXXXX</div>
118 <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="100">XXXXX XXXXXX</div>
119 </div>
120 </div>
121
122 <div style="position: relative;">
123 <div class="grid gridMinMaxMinMax" style="height: 100px;">
124 <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="20">XXXXX XXXXXX</div>
125 <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="20">XXXXX XXXXXX</div>
126 <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="80">XXXXX XXXXXX</div>
127 <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="80">XXXXX XXXXXX</div>
128 </div>
129 </div>
130
131 <div class="unconstrainedContainer" style="position: relative">
132 <div class="grid gridAutoAuto">
133 <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width ="50" data-expected-height="30">XXXXX XXXXXX</div>
134 <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-widt h="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
135 <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-widt h="50" data-expected-height="40">XXXXX XXXXXX</div>
136 <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-wid th="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
137 </div>
138 </div>
139
56 </body> 140 </body>
57 </html> 141 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698