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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-repeat-intrinsic.html

Issue 2287533002: [css-grid] Remove a duplicated auto repeat computation for intrinsic sizes (Closed)
Patch Set: Rebased patch Created 4 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html » ('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="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
4 <link href="resources/grid.css" rel="stylesheet">
5
6 <style>
7 .grid {
8 border: 2px solid black;
9 position: relative;
10 padding-top: 10px;
11 justify-items: start;
12 }
13
14 .item {
15 background: cyan;
16 height: 20px;
17 }
18
19 .gridAutoFillFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(min-c ontent, 40px); }
20 .gridAutoFillAuto { grid-template-columns: repeat(auto-fill, 10px) minmax(60px, auto); }
21 .gridAutoFitFixed { grid-template-columns: repeat(auto-fit, 20px) minmax(min-con tent, 40px); }
22 .gridAutoFitAuto { grid-template-columns: repeat(auto-fit, 10px) minmax(60px, au to); }
23
24 .paddingTop { padding-top: 10px; }
25
26 .abs {
27 height: 5px;
28 position: absolute;
29 width: 100%;
30 }
31 </style>
32
33 <script src="../../resources/testharness.js"></script>
34 <script src="../../resources/testharnessreport.js"></script>
35 <script src="../../resources/check-layout-th.js"></script>
36
37 <body onload="checkLayout('.grid')">
38
39 <p>This test checks that auto repeat tracks are properly recomputed and items ar e properly repositioned when grids have intrinsic inline sizes.</p>
40
41 <div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width=" 104" data-expected-height="34">
42 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
43 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
44 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
45 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"> </div>
46 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
47 </div>
48
49 <div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width=" 104" data-expected-height="34">
50 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
51 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
52 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
53 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"> </div>
54 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
55 </div>
56
57 <div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="1 04" data-expected-height="34">
58 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
59 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
60 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
61 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"> </div>
62 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
63 </div>
64
65 <div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="7 4" data-expected-height="34">
66 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
67 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
68 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
69 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0">< /div>
70 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
71 </div>
72
73 <!-- auto-fill -->
74
75 <div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="1 04" data-expected-height="34">
76 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
77 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
78 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
79 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"> </div>
80 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
81 </div>
82
83 <div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="1 04" data-expected-height="34">
84 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
85 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
86 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
87 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"> </div>
88 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
89 </div>
90
91 <div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="10 4" data-expected-height="34">
92 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
93 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
94 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
95 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"> </div>
96 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
97 </div>
98
99 <div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74 " data-expected-height="34">
100 <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-w idth="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></d iv>
101 <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expect ed-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0">< /div>
102 <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expect ed-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"> </div>
103 <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expect ed-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0">< /div>
104 <div class="abs" style="grid-column: 4 / 5; background: green;" data-expecte d-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0">< /div>
105 </div>
106
107 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-change-intrinsic-size-with-auto-repeat-tracks.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698