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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item-children.html

Issue 2039223002: [css-grid] Fix percentage height on grid item's children (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: New version using cbstyle Created 4 years, 6 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 href="resources/grid.css" rel="stylesheet">
3 <style>
4
5 .grid {
6 grid: 100px / 200px;
7 }
8
9 .fixedSize350 {
10 width: 350px;
11 height: 350px;
12 }
13
14 .percentSize100 {
15 width: 100%;
16 height: 100%;
17 }
18
19 .percentSize50 {
20 width: 50%;
21 height: 50%;
22 }
23
24 </style>
25 <script src="../../resources/testharness.js"></script>
26 <script src="../../resources/testharnessreport.js"></script>
27 <script src="../../resources/check-layout-th.js"></script>
28 <body onload="checkLayout('.grid')">
29 <div id="log"></div>
30
31 <p>This test checks that percentages are properly resolved for grid items' child ren.</p>
32
33 <div class="grid">
34 <div data-expected-width="200" data-expected-height="100">
35 <div class="percentSize100" data-expected-width="200" data-expected-heig ht="100">
36 </div>
37 </div>
38 </div>
39
40 <div class="grid">
41 <div data-expected-width="200" data-expected-height="100">
42 <div class="percentSize50" data-expected-width="100" data-expected-heigh t="50">
43 </div>
44 </div>
45 </div>
46
47 <div class="grid">
48 <div class="fixedSize350" data-expected-width="350" data-expected-height="35 0">
49 <div class="percentSize100" data-expected-width="350" data-expected-heig ht="350">
50 </div>
51 </div>
52 </div>
53
54 <div class="grid">
55 <div class="fixedSize350" data-expected-width="350" data-expected-height="35 0">
56 <div class="percentSize50" data-expected-width="175" data-expected-heigh t="175">
57 </div>
58 </div>
59 </div>
60
61 <div class="grid">
62 <div class="percentSize100" data-expected-width="200" data-expected-height=" 100">
63 <div class="percentSize100" data-expected-width="200" data-expected-heig ht="100">
64 </div>
65 </div>
66 </div>
67
68 <div class="grid">
69 <div class="percentSize100" data-expected-width="200" data-expected-height=" 100">
70 <div class="percentSize50" data-expected-width="100" data-expected-heigh t="50">
71 </div>
72 </div>
73 </div>
74
75 <div class="grid">
76 <div class="percentSize50" data-expected-width="100" data-expected-height="5 0">
77 <div class="percentSize100" data-expected-width="100" data-expected-heig ht="50">
78 </div>
79 </div>
80 </div>
81
82 <div class="grid">
83 <div class="percentSize50" data-expected-width="100" data-expected-height="5 0">
84 <div class="percentSize50" data-expected-width="50" data-expected-height ="25">
85 </div>
86 </div>
87 </div>
88
89 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698