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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html

Issue 448993002: [CSSGridLayout] Skip items spanning flex tracks in track sizing algo (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing v2 Created 6 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 | LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt » ('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 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .grid {
7 font: 10px/1 Ahem;
8 }
9
10 .gridFixedAndMinContentAndFlex {
11 grid-template-columns: 20px min-content 1fr;
12 }
13
14 .gridMinMaxFixedFlexAndMaxContentAndAuto {
15 grid-template-columns: minmax(20px, 1fr) max-content auto;
16 }
17
18 .gridMinMaxFlexFixedAndMinContentAndFixed {
19 grid-template-columns: minmax(0.5fr, 35px) min-content 25px;
20 }
21
22 .gridMinContentAndMinMaxFixedMinContentAndFlex {
23 grid-template-columns: min-content minmax(20px, min-content) 2fr;
24 }
25
26 .gridMaxContentAndMinMaxFixedMaxContentAndFlex {
27 grid-template-columns: max-content minmax(20px, max-content) 1fr;
28 }
29
30 </style>
31 <script src="../../resources/js-test.js"></script>
32 </head>
33 <body>
34
35 <p>Test that resolving auto tracks on grid items works properly.</p>
36
37 <div style="position: relative; width: 100px;">
38 <div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAn dFlex">
39 <div style="grid-column: 2 / span 2;">XXXXXXXX</div>
40 <div style="grid-column: 1 / span 2; grid-row: 2;">XXXXX</div>
41 </div>
42 </div>
43
44 <div style="position: relative; width: 100px;">
45 <div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixed AndMinContentAndFlex">
46 <div style="grid-column: 1 / span 2;">XXX XXX</div>
47 <div style="grid-column: 1 / -1; grid-row: 2;">XXXX</div>
48 </div>
49 </div>
50
51 <div style="position: relative; width: 100px;">
52 <div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixe dFlexAndMaxContentAndAuto">
53 <div style="grid-column: 1 / span 2;">XXX XXX</div>
54 <div style="grid-column: 2 / span 2; grid-row: 2;">XXXX</div>
55 </div>
56 </div>
57
58 <div style="position: relative; width: 100px;">
59 <div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class=" grid gridMinMaxFixedFlexAndMaxContentAndAuto">
60 <div style="grid-column: 1 / -1;">XXX XXX</div>
61 <div style="grid-column: 1 / span 2; grid-row: 2;">XXXX XXXX</div>
62 </div>
63 </div>
64
65 <div style="position: relative; width: 100px;">
66 <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFle xFixedAndMinContentAndFixed">
67 <div style="grid-column: 1 / span 2;">XXXX XXXX</div>
68 <div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div>
69 <div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div>
70 <div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div>
71 </div>
72 </div>
73
74 <div style="position: relative; width: 100px;">
75 <div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinC ontentAndMinMaxFixedMinContentAndFlex">
76 <div style="grid-column: 2 / span 2;">XXXXX</div>
77 <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>
78 <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>
79 </div>
80 </div>
81
82 <div style="position: relative; width: 100px;">
83 <div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxC ontentAndMinMaxFixedMaxContentAndFlex">
84 <div style="grid-column: 2 / span 2;">XXXXX</div>
85 <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>
86 <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>
87 </div>
88 </div>
89
90 </body>
91 <script src="resources/grid-definitions-parsing-utils.js"></script>
92 <script>
93 function checkColumns(gridId, columnValue)
94 {
95 window.gridElement = document.getElementById(gridId);
96 shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPrope rtyValue('grid-template-columns')", columnValue);
97 }
98
99 checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px");
100 checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px");
101 checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");
Julien - ping for review 2014/10/15 16:04:58 I have a hard time saying whether any of these res
svillar 2014/10/16 06:36:30 Ideally we should have w3c tests for this kind of
102 checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100p x 0px 0px");
103 checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px");
104 checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");
105 checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");
106
107 </script>
108 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698