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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/definite-cross-sizes.html

Issue 1875263005: [css-flexbox] More correctly implement percentage sizing (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 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/css3/flexbox/flex-align.html » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.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 2
3 <title>CSS Flexbox: Definite cross sizes</title> 3 <title>CSS Flexbox: Definite cross sizes</title>
4 4
5 <style> 5 <style>
6 .rect { 6 .rect {
7 width: 50px; 7 width: 50px;
8 height: 50px; 8 height: 50px;
9 background-color: green; 9 background-color: green;
10 } 10 }
(...skipping 13 matching lines...) Expand all
24 <link rel="author" title="Google Inc." href="https://www.google.com/"> 24 <link rel="author" title="Google Inc." href="https://www.google.com/">
25 25
26 <script src="../../resources/testharness.js"></script> 26 <script src="../../resources/testharness.js"></script>
27 <script src="../../resources/testharnessreport.js"></script> 27 <script src="../../resources/testharnessreport.js"></script>
28 <script src="../../resources/check-layout-th.js"></script> 28 <script src="../../resources/check-layout-th.js"></script>
29 29
30 <body onload="checkLayout('.flexbox')" style="height: 800px;"> 30 <body onload="checkLayout('.flexbox')" style="height: 800px;">
31 <div id=log></div> 31 <div id=log></div>
32 32
33 <p>This test verifies that we consider flex items' cross sizes to be definite 33 <p>This test verifies that we consider flex items' cross sizes to be definite
34 iff the flexbox has a definite cross size, is single-line, and the align value 34 if the align value is stretch (the default)</p>
35 is stretch (the default)</p>
36 35
37 <p>Tests that we get an indefinite size in the normal case.</p> 36 <p>Tests that we get a definite size in the simple case.</p>
38 <div class="flexbox" data-expected-height="50"> 37 <div class="flexbox" data-expected-height="50">
39 <div data-expected-height="50"> 38 <div data-expected-height="50">
40 <div style="height: 50%" data-expected-height="50"> 39 <div style="height: 50%" data-expected-height="25">
41 <div class="rect" data-expected-height="50"></div> 40 <div class="rect" data-expected-height="50"></div>
42 </div> 41 </div>
43 </div> 42 </div>
44 </div> 43 </div>
45 44
46 <p>Tests that we get an indefinite size in a wrapping flexbox</p> 45 <p>Tests that we get an definite size in a wrapping flexbox</p>
47 <div class="flexbox wrap" style="height: 50px;" data-expected-height="50"> 46 <div class="flexbox wrap" style="height: 50px;" data-expected-height="50">
48 <div data-expected-height="50"> 47 <div data-expected-height="50">
49 <div style="height: 50%" data-expected-height="50"> 48 <div style="height: 50%" data-expected-height="25">
50 <div class="rect" data-expected-height="50"></div> 49 <div class="rect" data-expected-height="50"></div>
51 </div> 50 </div>
52 </div> 51 </div>
53 </div> 52 </div>
54 53
55 <p>Tests that we get an indefinite size when not stretch-aligning</p> 54 <p>Tests that we get an indefinite size when not stretch-aligning</p>
56 <div class="flexbox wrap" style="height: 50px;" data-expected-height="50"> 55 <div class="flexbox wrap" style="height: 50px;" data-expected-height="50">
57 <div class="align-self-flex-start" data-expected-height="50"> 56 <div class="align-self-flex-start" data-expected-height="50">
58 <div style="height: 50%" data-expected-height="50"> 57 <div style="height: 50%" data-expected-height="50">
59 <div class="rect" data-expected-height="50"></div> 58 <div class="rect" data-expected-height="50"></div>
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
103 102
104 <p>Tests that percentage sizes can also be definite</p> 103 <p>Tests that percentage sizes can also be definite</p>
105 <div class="flexbox" style="height: 10%;" data-expected-height="80"> 104 <div class="flexbox" style="height: 10%;" data-expected-height="80">
106 <div data-expected-height="80"> 105 <div data-expected-height="80">
107 <div style="height: 50%" data-expected-height="40"> 106 <div style="height: 50%" data-expected-height="40">
108 <div class="rect" data-expected-height="50"></div> 107 <div class="rect" data-expected-height="50"></div>
109 </div> 108 </div>
110 </div> 109 </div>
111 </div> 110 </div>
112 111
113 <p>Tests that percentage sizes are not necessarily definite</p> 112 <p>Tests that we use a definite size even when a percentage size is not definite </p>
114 <div> 113 <div>
115 <div class="flexbox" style="height: 10%;" data-expected-height="50"> 114 <div class="flexbox" style="height: 10%;" data-expected-height="50">
116 <div data-expected-height="50"> 115 <div data-expected-height="50">
117 <div style="height: 50%" data-expected-height="50"> 116 <div style="height: 50%" data-expected-height="25">
118 <div class="rect" data-expected-height="50"></div> 117 <div class="rect" data-expected-height="50"></div>
119 </div> 118 </div>
120 </div> 119 </div>
121 </div> 120 </div>
122 </div> 121 </div>
123 122
124 <p>Tests that we don't mix up widths and heights</p> 123 <p>Tests that we don't mix up widths and heights</p>
125 <div class="flexbox" style="height: 50px; width: 100px;" data-expected-height="5 0"> 124 <div class="flexbox" style="height: 50px; width: 100px;" data-expected-height="5 0">
126 <div style="width: 100px;" data-expected-height="50" data-expected-width="100" > 125 <div style="width: 100px;" data-expected-height="50" data-expected-width="100" >
127 <div style="width: 50%" data-expected-width="50"> 126 <div style="width: 50%" data-expected-width="50">
128 <div class="rect" data-expected-height="50" data-expected-width="50"></div > 127 <div class="rect" data-expected-height="50" data-expected-width="50"></div >
129 </div> 128 </div>
130 </div> 129 </div>
131 </div> 130 </div>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/flexbox/flex-align.html » ('j') | third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698