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

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: Created 5 years, 2 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/check-layout.js"></script>
35 <body onload="checkLayout('.grid')">
36
37 <p>This test checks that percentage tracks are properly resolved for absolute po sitioned grid containers.</p>
38
39
40 <div class="wrapper">
41 <div class="grid oneRowOneColumn">
42 <div class="firstRowFirstColumn"
43 data-offset-x="0" data-offset-y="0" data-expected-width="30" data-ex pected-height="10">
44 XXX
45 </div>
46 </div>
47 </div>
48
49 <div class="wrapper">
50 <div class="grid oneRowOneColumn topBottomLeftRight">
51 <div class="firstRowFirstColumn"
52 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-e xpected-height="100">
53 XXX
54 </div>
55 </div>
56 </div>
57
58 <div class="wrapper">
59 <div class="grid twoRowsTwoColumns">
60 <div class="firstRowFirstColumn"
61 data-offset-x="0" data-offset-y="0" data-expected-width="30" data-ex pected-height="10">
62 XXX
63 </div>
64 <div class="firstRowSecondColumn"
65 data-offset-x="30" data-offset-y="0" data-expected-width="30" data-e xpected-height="10">
66 XXX
67 </div>
68 <div class="secondRowFirstColumn"
69 data-offset-x="0" data-offset-y="10" data-expected-width="30" data-e xpected-height="10">
70 XXX
71 </div>
72 <div class="secondRowSecondColumn"
73 data-offset-x="30" data-offset-y="10" data-expected-width="30" data- expected-height="10">
74 XXX
75 </div>
76 </div>
77 </div>
78
79 <div class="wrapper">
80 <div class="grid twoRowsTwoColumns topBottomLeftRight">
81 <div class="firstRowFirstColumn"
82 data-offset-x="0" data-offset-y="0" data-expected-width="60" data-ex pected-height="25">
83 XXX
84 </div>
85 <div class="firstRowSecondColumn"
86 data-offset-x="60" data-offset-y="0" data-expected-width="40" data-e xpected-height="25">
87 XXX
88 </div>
89 <div class="secondRowFirstColumn"
90 data-offset-x="0" data-offset-y="25" data-expected-width="60" data-e xpected-height="75">
91 XXX
92 </div>
93 <div class="secondRowSecondColumn"
94 data-offset-x="60" data-offset-y="25" data-expected-width="40" data- expected-height="75">
95 XXX
96 </div>
97 </div>
98 </div>
99
100 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698