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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-sizing-vert-001.xhtml

Issue 1705363002: Import Mozilla's flexbox tests from csswg-test (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: add test expectations for mac-specific failures Created 4 years, 10 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 | « third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-sizing-horiz-002-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-sizing-vert-001-expected.xhtml » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <?xml version="1.0" encoding="UTF-8"?> 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!-- 2 <!--
3 Any copyright is dedicated to the Public Domain. 3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/ 4 http://creativecommons.org/publicdomain/zero/1.0/
5 --> 5 -->
6 <!-- 6 <!--
7 This testcase checks how "min-height" and "max-height" affect the sizing 7 This testcase checks how "min-height" and "max-height" affect the sizing
8 of vertical flex containers that have no explicit "height" property. 8 of vertical flex containers that have no explicit "height" property.
9 --> 9 -->
10 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <html xmlns="http://www.w3.org/1999/xhtml">
11 <head> 11 <head>
12 <title>CSS Test: Testing sizing of an auto-sized vertical flex container wit h min-height and max-height constraints</title>
13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com" />
14 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" />
15 <link rel="match" href="flexbox-sizing-vert-001-ref.xhtml"/>
12 <style> 16 <style>
13 div { width: 10px; } 17 div { width: 10px; }
14 div.flexbox { 18 div.flexbox {
15 float: left; 19 float: left;
16 border: 1px dashed blue; 20 border: 1px dashed blue;
17 font-size: 10px; 21 font-size: 10px;
18 display: flex; 22 display: flex;
19 flex-direction: column; 23 flex-direction: column;
20 margin-right: 2px; 24 margin-right: 2px;
21 } 25 }
22 div.a { 26 div.a {
23 flex: 1 20px; 27 flex: 1 20px;
24 max-height: 60px; 28 max-height: 60px;
25 background: lightgreen; 29 background: lightgreen;
26 } 30 }
27 div.b { 31 div.b {
28 flex: 1 20px; 32 flex: 1 20px;
29 min-height: 40px; 33 min-height: 40px;
30 max-height: 60px; 34 max-height: 60px;
31 background: purple; 35 background: purple;
32 } 36 }
33 div.c { 37 div.c {
34 flex: 1 40px; 38 flex: 1 40px;
35 max-height: 10px; 39 min-height: 10px;
36 max-height: 60px; 40 max-height: 60px;
37 background: orange; 41 background: orange;
38 } 42 }
39 </style> 43 </style>
40 </head> 44 </head>
41 <body> 45 <body>
42 <!-- floated auto-sized vertical flexbox should shrinkwrap its flex items' 46 <!-- floated auto-sized vertical flexbox should shrinkwrap its flex items'
43 hypothetical main sizes (their flex base sizes, clamped to min/max) --> 47 hypothetical main sizes (their flex base sizes, clamped to min/max) -- >
44 <div class="flexbox"> 48 <div class="flexbox">
45 <div class="a"/><div class="b"/><div class="c"/> 49 <div class="a"/><div class="b"/><div class="c"/>
46 </div> 50 </div>
47 51
48 <!-- Adding a small min-size shouldn't affect that. --> 52 <!-- Adding a small min-size shouldn't affect that. -->
49 <div class="flexbox" style="min-height: 10px"> 53 <div class="flexbox" style="min-height: 10px">
50 <div class="a"/><div class="b"/><div class="c"/> 54 <div class="a"/><div class="b"/><div class="c"/>
51 </div> 55 </div>
52 56
53 <!-- ...nor should a large max-size. --> 57 <!-- ...nor should a large max-size. -->
54 <div class="flexbox" style="max-height: 300px"> 58 <div class="flexbox" style="max-height: 300px">
55 <div class="a"/><div class="b"/><div class="c"/> 59 <div class="a"/><div class="b"/><div class="c"/>
56 </div> 60 </div>
57 61
58 <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap 62 <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap
59 size, we should jump up to that size.--> 63 size, we should jump up to that size. -->
60 <div class="flexbox" style="min-height: 120px"> 64 <div class="flexbox" style="min-height: 120px">
61 <div class="a"/><div class="b"/><div class="c"/> 65 <div class="a"/><div class="b"/><div class="c"/>
62 </div> 66 </div>
63 67
64 <!-- ...even if it's large enough that our items won't occupy all the 68 <!-- ...even if it's large enough that our items won't occupy all the
65 space. --> 69 space. -->
66 <div class="flexbox" style="min-height: 200px"> 70 <div class="flexbox" style="min-height: 200px">
67 <div class="a"/><div class="b"/><div class="c"/> 71 <div class="a"/><div class="b"/><div class="c"/>
68 </div> 72 </div>
69 73
70 <!-- If we set a maximum size that's smaller than the shrinkwrap size, 74 <!-- If we set a maximum size that's smaller than the shrinkwrap size,
71 we should max out at that size.--> 75 we should max out at that size. -->
72 <div class="flexbox" style="max-height: 70px"> 76 <div class="flexbox" style="max-height: 70px">
73 <div class="a"/><div class="b"/><div class="c"/> 77 <div class="a"/><div class="b"/><div class="c"/>
74 </div> 78 </div>
75 79
76 <!-- The max-size may be small enough that our items will overflow. --> 80 <!-- The max-size may be small enough that our items will overflow. -->
77 <div class="flexbox" style="max-height: 20px"> 81 <div class="flexbox" style="max-height: 20px">
78 <div class="a"/><div class="b"/><div class="c"/> 82 <div class="a"/><div class="b"/><div class="c"/>
79 </div> 83 </div>
80 84
81 <!-- But if we add a min-size, it beats the max-size. Here, we use a 85 <!-- But if we add a min-size, it beats the max-size. Here, we use a
82 min-size smaller than the sum of the items' base sizes... --> 86 min-size smaller than the sum of the items' base sizes... -->
83 <div class="flexbox" style="min-height: 58px; max-height: 20px"> 87 <div class="flexbox" style="min-height: 58px; max-height: 20px">
84 <div class="a"/><div class="b"/><div class="c"/> 88 <div class="a"/><div class="b"/><div class="c"/>
85 </div> 89 </div>
86 90
87 <!-- ...and here we use a min-size larger than the sum of the items' 91 <!-- ...and here we use a min-size larger than the sum of the items'
88 base sizes. --> 92 base sizes. -->
89 <div class="flexbox" style="min-height: 140px; max-height: 20px"> 93 <div class="flexbox" style="min-height: 140px; max-height: 20px">
90 <div class="a"/><div class="b"/><div class="c"/> 94 <div class="a"/><div class="b"/><div class="c"/>
91 </div> 95 </div>
92 96
93 </body> 97 </body>
94 </html> 98 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-sizing-horiz-002-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-sizing-vert-001-expected.xhtml » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698