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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html

Issue 2121173002: [css-grid] Fix percentage height resolution for replaced elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Make hasAutoHeightOrContainingBlockWithAutoHeight(bool) private Created 4 years, 5 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 | third_party/WebKit/Source/core/layout/LayoutBox.cpp » ('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
3 <link href="resources/grid.css" rel="stylesheet">
4 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
6
7 <style>
8 .grid {
9 grid: 200px / 200px;
10 width: 200px;
11 }
12
13 .red {
14 background-color: red;
15 }
16
17 img {
18 height: 100%;
19 display: block;
20 }
21 </style>
22
23 <script src="../../resources/testharness.js"></script>
24 <script src="../../resources/testharnessreport.js"></script>
25 <script src="../../resources/check-layout-th.js"></script>
26
27 <body onload="checkLayout('.grid')">
28 <div id="log"></div>
29
30 <p>This test checks that percentage heights are properly resolved for grid items that are replaced elements.
31 You shouldn't see any red if the test is working as expected.</p>
32
33 <p>1) 100% height on the image (grid item) should be resolved against the height of the grid area (200px).
34 Actually we don't need the 100% height in this case as the grid items are stretc hed by default.</p>
35
36 <div class="grid red">
37 <img src="../css/resources/greenbox-100px.png"
38 data-expected-width="200" data-expected-height="200">
39 </div>
40
41 <p>2) 100% height on the image (grid item's child) should be resolved against th e height of the grid item,
42 which is stretched by default to the height of the grid area (200px).</p>
43
44
45 <div class="grid red">
46 <div data-expected-width="200" data-expected-height="200">
47 <img src="../css/resources/greenbox-100px.png"
48 data-expected-width="200" data-expected-height="200">
49 </div>
50 </div>
51
52 <p>3) 100% height on the image (grid item) should be resolved against the height of the grid area (200px).
53 The grid item is not stretched in this case but the height percentage can be res olved anyway.</p>
54
55 <div class="grid red alignItemsStart">
56 <img src="../css/resources/greenbox-100px.png"
57 data-expected-width="200" data-expected-height="200">
58 </div>
59
60 <p>4) 100% height on the image (grid item's child) should be resolved against th e height of the grid item,
61 as it's not stretched the grid item's height is indefinite, so the percentage ca nnot be resolved.</p>
62
63 <div class="grid alignItemsStart justifyItemsStart">
64 <div class="firstRowFirstColumn red" style="width: 100px; height: 100px;"
65 data-expected-width="100" data-expected-height="100">
66 </div>
67 <div class="firstRowFirstColumn">
68 <img src="../css/resources/greenbox-100px.png"
69 data-expected-width="100" data-expected-height="100">
70 </div>
71 </div>
72
73 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/layout/LayoutBox.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698