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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/positioned-grid-container-percentage-tracks.html

Issue 1383003002: [css-grid] Fix definite/indefinite size detection for abspos elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: New version Created 4 years, 8 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 .wrapper {
6 position: relative;
7 width: 100px;
8 height: 100px;
9 }
10
11 .grid {
12 position: absolute;
13 font: 10px/1 Ahem;
14 }
15
16 .topBottomLeftRight {
17 top: 0;
18 bottom: 0;
19 left: 0;
20 right: 0;
21 }
22
23 .oneRowOneColumn {
24 grid-template-rows: 100%;
25 grid-template-columns: 100%;
26 }
27
28 .twoRowsTwoColumns {
29 grid-template-rows: 25% 75%;
30 grid-template-columns: 60% 40%;
31 }
32
33 </style>
34 <script src="../../resources/testharness.js"></script>
35 <script src="../../resources/testharnessreport.js"></script>
36 <script src="../../resources/check-layout-th.js"></script>
37 <body onload="checkLayout('.grid')">
38 <div id="log"></div>
39
40 <p>This test checks that percentage tracks are properly resolved for absolute po sitioned grid containers.</p>
41
42
43 <div class="wrapper">
44 <div class="grid oneRowOneColumn">
45 <div class="firstRowFirstColumn"
46 data-offset-x="0" data-offset-y="0" data-expected-width="30" data-ex pected-height="10">
47 XXX
48 </div>
49 </div>
50 </div>
51
52 <div class="wrapper">
53 <div class="grid oneRowOneColumn topBottomLeftRight">
54 <div class="firstRowFirstColumn"
55 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-e xpected-height="100">
56 XXX
57 </div>
58 </div>
59 </div>
60
61 <div class="wrapper">
62 <div class="grid twoRowsTwoColumns">
63 <div class="firstRowFirstColumn"
64 data-offset-x="0" data-offset-y="0" data-expected-width="30" data-ex pected-height="10">
65 XXX
66 </div>
67 <div class="firstRowSecondColumn"
68 data-offset-x="30" data-offset-y="0" data-expected-width="30" data-e xpected-height="10">
69 XXX
70 </div>
71 <div class="secondRowFirstColumn"
72 data-offset-x="0" data-offset-y="10" data-expected-width="30" data-e xpected-height="10">
73 XXX
74 </div>
75 <div class="secondRowSecondColumn"
76 data-offset-x="30" data-offset-y="10" data-expected-width="30" data- expected-height="10">
77 XXX
78 </div>
79 </div>
80 </div>
81
82 <div class="wrapper">
83 <div class="grid twoRowsTwoColumns topBottomLeftRight">
84 <div class="firstRowFirstColumn"
85 data-offset-x="0" data-offset-y="0" data-expected-width="60" data-ex pected-height="25">
86 XXX
87 </div>
88 <div class="firstRowSecondColumn"
89 data-offset-x="60" data-offset-y="0" data-expected-width="40" data-e xpected-height="25">
90 XXX
91 </div>
92 <div class="secondRowFirstColumn"
93 data-offset-x="0" data-offset-y="25" data-expected-width="60" data-e xpected-height="75">
94 XXX
95 </div>
96 <div class="secondRowSecondColumn"
97 data-offset-x="60" data-offset-y="25" data-expected-width="40" data- expected-height="75">
98 XXX
99 </div>
100 </div>
101 </div>
102
103 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698