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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-sizing-columns-min-max-width.html

Issue 2480493002: [css-grid] Use min|max-sizes to compute flex fraction (Closed)
Patch Set: Patch for landing Created 4 years, 1 month 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/flex-sizing-rows-min-max-height.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 <link href="resources/grid.css" rel="stylesheet">
3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
4 <style>
5 .grid {
6 margin: 3px;
7 grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr);
8 grid-column-gap: 33px;
9 border: 5px dashed;
10 padding: 2px;
11 }
12
13 .float { float: left; }
14
15 .item:nth-child(1) { background-color: purple; }
16 .item:nth-child(2) { background-color: blue; }
17 </style>
18
19 <script src="../../resources/testharness.js"></script>
20 <script src="../../resources/testharnessreport.js"></script>
21 <script src="../../resources/check-layout-th.js"></script>
22 <body onload="checkLayout('.grid')">
23
24 <p>This test PASS if all the grids in the same row look the same.</p>
25
26 <div class="grid float" style="max-width: 70px" data-expected-height="64" data-e xpected-width="84">
27 <div class="item" data-expected-height="50" data-expected-width="10"></div>
28 <div class="item" data-expected-height="50" data-expected-width="27"></div>
29 </div>
30 <div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-h eight="64" data-expected-width="84">
31 <div class="item" data-expected-height="50" data-expected-width="10"></div>
32 <div class="item" data-expected-height="50" data-expected-width="27"></div>
33 </div>
34 <div class="grid float" style="width: 70px" data-expected-height="64" data-expec ted-width="84">
35 <div class="item" data-expected-height="50" data-expected-width="10"></div>
36 <div class="item" data-expected-height="50" data-expected-width="27"></div>
37 </div>
38
39 <br clear="all">
40
41 <div class="grid float" style="min-width: 108px" data-expected-height="64" data- expected-width="122">
42 <div class="item" data-expected-height="50" data-expected-width="15"></div>
43 <div class="item" data-expected-height="50" data-expected-width="60"></div>
44 </div>
45 <div class="grid float" style="min-width: 108px; max-width: 60px" data-expected- height="64" data-expected-width="122">
46 <div class="item" data-expected-height="50" data-expected-width="15"></div>
47 <div class="item" data-expected-height="50" data-expected-width="60"></div>
48 </div>
49 <div class="grid float" style="width: 108px" data-expected-height="64" data-expe cted-width="122">
50 <div class="item" data-expected-height="50" data-expected-width="15"></div>
51 <div class="item" data-expected-height="50" data-expected-width="60"></div>
52 </div>
53
54 <br clear="all">
55
56 <div class="grid float min-width-max-content" data-expected-height="64" data-exp ected-width="97">
57 <div class="item" data-expected-height="50" data-expected-width="10"></div>
58 <div class="item" data-expected-height="50" data-expected-width="40"></div>
59 </div>
60 <div class="grid float min-width-max-content max-width-min-content" data-expecte d-height="64" data-expected-width="97">
61 <div class="item" data-expected-height="50" data-expected-width="10"></div>
62 <div class="item" data-expected-height="50" data-expected-width="40"></div>
63 </div>
64 <div class="grid float max-content" data-expected-height="64" data-expected-widt h="97">
65 <div class="item" data-expected-height="50" data-expected-width="10"></div>
66 <div class="item" data-expected-height="50" data-expected-width="40"></div>
67 </div>
68
69 <br clear="all">
70
71 <div class="float min-content">
72 <div class="grid min-width-max-content" data-expected-height="64" data-expec ted-width="97">
73 <div class="item" data-expected-height="50" data-expected-width="10"></d iv>
74 <div class="item" data-expected-height="50" data-expected-width="40"></d iv>
75 </div>
76 </div>
77 <div class="float max-content">
78 <div class="grid min-width-max-content max-width-min-content" data-expected- height="64" data-expected-width="97">
79 <div class="item" data-expected-height="50" data-expected-width="10"></d iv>
80 <div class="item" data-expected-height="50" data-expected-width="40"></d iv>
81 </div>
82 </div>
83 <div class="float fit-content">
84 <div class="grid max-content" data-expected-height="64" data-expected-width= "97">
85 <div class="item" data-expected-height="50" data-expected-width="10"></d iv>
86 <div class="item" data-expected-height="50" data-expected-width="40"></d iv>
87 </div>
88 </div>
89
90 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-sizing-rows-min-max-height.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698