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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/min-height-border-box.html

Issue 1854623002: [css-grid] Use the margin box for non auto minimum sizes (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: New approach 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-margin-box.html » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet"> 2 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet"> 3 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <style> 4 <style>
5 .grid { 5 .grid {
6 border: 5px solid magenta; 6 border: 5px solid magenta;
7 margin-bottom: 25px; 7 margin-bottom: 25px;
8 grid-template-rows: minmax(auto, 0px); 8 grid-template-rows: minmax(auto, 0px);
9 } 9 }
10 10
11 .item { 11 .item {
12 font: 25px/1 Ahem; 12 font: 25px/1 Ahem;
13 } 13 }
14 14
15 .container { width: 150px; } 15 .container { width: 150px; }
16 .borderPadding { 16 .borderPaddingMargin {
17 border-width: 2px 3px 5px 9px; 17 border-width: 2px 3px 5px 9px;
18 border-color: blue; 18 border-color: blue;
19 border-style: solid; 19 border-style: solid;
20 padding: 4px 9px 12px 20px; 20 padding: 4px 9px 12px 20px;
21 margin: 7px 10px 12px 14px;
21 } 22 }
22 23
23 </style> 24 </style>
24 25
25 <script src="../../resources/testharness.js"></script> 26 <script src="../../resources/testharness.js"></script>
26 <script src="../../resources/testharnessreport.js"></script> 27 <script src="../../resources/testharnessreport.js"></script>
27 <script src="../../resources/check-layout-th.js"></script> 28 <script src="../../resources/check-layout-th.js"></script>
28 29
29 <body onload="checkLayout('.grid')"> 30 <body onload="checkLayout('.grid')">
30 <div id="log"></div> 31 <div id="log"></div>
31 32
32 <h3>min-height: auto. grid height: auto</h3> 33 <h3>min-height: auto. grid height: auto</h3>
33 <div class="container"> 34 <div class="container">
34 <div class="grid" data-expected-width="150" data-expected-height="35"> 35 <div class="grid" data-expected-width="150" data-expected-height="35">
35 <div class="item" data-expected-width="140" data-expected-height="25">XX XX</div> 36 <div class="item" data-expected-width="140" data-expected-height="25">XX XX</div>
36 </div> 37 </div>
37 </div> 38 </div>
38 39
39 <div class="container"> 40 <div class="container">
40 <div class="grid" data-expected-width="150" data-expected-height="58"> 41 <div class="grid" data-expected-width="150" data-expected-height="77">
41 <div class="item borderPadding" data-expected-width="140" data-expected- height="48">XXX</div> 42 <div class="item borderPaddingMargin" data-expected-width="116" data-exp ected-height="48">XXX</div>
42 </div> 43 </div>
43 </div> 44 </div>
44 45
45 <h3>min-height: 0px. grid height: auto</h3> 46 <h3>min-height: 0px. grid height: auto</h3>
46 <div class="container"> 47 <div class="container">
47 <div class="grid" data-expected-width="150" data-expected-height="10"> 48 <div class="grid" data-expected-width="150" data-expected-height="10">
48 <div class="item" style="min-height: 0px;" data-expected-width="140" dat a-expected-height="0">XXXX</div> 49 <div class="item" style="min-height: 0px;" data-expected-width="140" dat a-expected-height="0">XXXX</div>
49 </div> 50 </div>
50 </div> 51 </div>
51 52
52 <div class="container"> 53 <div class="container">
53 <div class="grid" data-expected-width="150" data-expected-height="33"> 54 <div class="grid" data-expected-width="150" data-expected-height="52">
54 <div class="item borderPadding" style="min-height: 0px;" data-expected-w idth="140" data-expected-height="23">XXX</div> 55 <div class="item borderPaddingMargin" style="min-height: 0px;" data-expe cted-width="116" data-expected-height="23">XXX</div>
55 </div> 56 </div>
56 </div> 57 </div>
57 58
58 <h3>NO STRETCH min-height: 0px. grid height: auto</h3> 59 <h3>NO STRETCH min-height: 0px. grid height: auto</h3>
59 <div class="container"> 60 <div class="container">
60 <div class="grid" data-expected-width="150" data-expected-height="10"> 61 <div class="grid" data-expected-width="150" data-expected-height="10">
61 <div class="item alignSelfStart" style="min-height: 0px;" data-expected- width="140" data-expected-height="25">XXXX</div> 62 <div class="item alignSelfStart" style="min-height: 0px;" data-expected- width="140" data-expected-height="25">XXXX</div>
62 </div> 63 </div>
63 </div> 64 </div>
64 65
65 <div class="container"> 66 <div class="container">
66 <div class="grid" data-expected-width="150" data-expected-height="33"> 67 <div class="grid" data-expected-width="150" data-expected-height="52">
67 <div class="item alignSelfStart borderPadding" style="min-height: 0px;" data-expected-width="140" data-expected-height="48">XXX</div> 68 <div class="item alignSelfStart borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="48">XXX</div>
68 </div> 69 </div>
69 </div> 70 </div>
70 71
71 <h3>min-height: 0px. grid height: 15px</h3> 72 <h3>min-height: 0px. grid height: 15px</h3>
72 <div class="container"> 73 <div class="container">
73 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25"> 74 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25">
74 <div class="item" style="min-height: 0px;" data-expected-width="140" dat a-expected-height="0">XXXX</div> 75 <div class="item" style="min-height: 0px;" data-expected-width="140" dat a-expected-height="0">XXXX</div>
75 </div> 76 </div>
76 </div> 77 </div>
77 78
78 <div class="container"> 79 <div class="container">
79 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25"> 80 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25">
80 <div class="item borderPadding" style="min-height: 0px;" data-expected-w idth="140" data-expected-height="23">XXX</div> 81 <div class="item borderPaddingMargin" style="min-height: 0px;" data-expe cted-width="116" data-expected-height="23">XXX</div>
81 </div> 82 </div>
82 </div> 83 </div>
83 84
84 <h3>NO STRETCH min-height: 0px. grid height: 15px</h3> 85 <h3>NO STRETCH min-height: 0px. grid height: 15px</h3>
85 <div class="container"> 86 <div class="container">
86 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25"> 87 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25">
87 <div class="item alignSelfStart" style="min-height: 0px;" data-expected- width="140" data-expected-height="25">XXXX</div> 88 <div class="item alignSelfStart" style="min-height: 0px;" data-expected- width="140" data-expected-height="25">XXXX</div>
88 </div> 89 </div>
89 </div> 90 </div>
90 91
91 <div class="container"> 92 <div class="container">
92 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25"> 93 <div class="grid" style="height: 15px;" data-expected-width="150" data-expec ted-height="25">
93 <div class="item alignSelfStart borderPadding" style="min-height: 0px;" data-expected-width="140" data-expected-height="48">XXX</div> 94 <div class="item alignSelfStart borderPaddingMargin" style="min-height: 0px;" data-expected-width="116" data-expected-height="48">XXX</div>
94 </div> 95 </div>
95 </div> 96 </div>
96 97
97 <h3>min-height: 30px. grid height: auto</h3> 98 <h3>min-height: 30px. grid height: auto</h3>
98 <div class="container"> 99 <div class="container">
99 <div class="grid" data-expected-width="150" data-expected-height="40"> 100 <div class="grid" data-expected-width="150" data-expected-height="40">
100 <div class="item" style="min-height: 30px;" data-expected-width="140" da ta-expected-height="30">XXXX</div> 101 <div class="item" style="min-height: 30px;" data-expected-width="140" da ta-expected-height="30">XXXX</div>
101 </div> 102 </div>
102 </div> 103 </div>
103 104
104 <div class="container"> 105 <div class="container">
105 <div class="grid" data-expected-width="150" data-expected-height="63"> 106 <div class="grid" data-expected-width="150" data-expected-height="82">
106 <div class="item borderPadding" style="min-height: 30px;" data-expected- width="140" data-expected-height="53">XXX</div> 107 <div class="item borderPaddingMargin" style="min-height: 30px;" data-exp ected-width="116" data-expected-height="53">XXX</div>
107 </div> 108 </div>
108 </div> 109 </div>
109 110
110 <h3>NO STRETCH min-height: 30px. grid height: auto</h3> 111 <h3>NO STRETCH min-height: 30px. grid height: auto</h3>
111 <div class="container"> 112 <div class="container">
112 <div class="grid" data-expected-width="150" data-expected-height="40"> 113 <div class="grid" data-expected-width="150" data-expected-height="40">
113 <div class="item alignSelfStart" style="min-height: 30px;" data-expected -width="140" data-expected-height="30">XXXX</div> 114 <div class="item alignSelfStart" style="min-height: 30px;" data-expected -width="140" data-expected-height="30">XXXX</div>
114 </div> 115 </div>
115 </div> 116 </div>
116 117
117 <div class="container"> 118 <div class="container">
118 <div class="grid" data-expected-width="150" data-expected-height="63"> 119 <div class="grid" data-expected-width="150" data-expected-height="82">
119 <div class="item alignSelfStart borderPadding" style="min-height: 30px;" data-expected-width="140" data-expected-height="53">XXX</div> 120 <div class="item alignSelfStart borderPaddingMargin" style="min-height: 30px;" data-expected-width="116" data-expected-height="53">XXX</div>
120 </div> 121 </div>
121 </div> 122 </div>
122 123
123 </body> 124 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/min-width-margin-box.html » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698