OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/flexbox.css" rel="stylesheet"> | 3 <link href="resources/flexbox.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 .flexbox { | 5 .flexbox { |
6 width: 600px; | 6 width: 600px; |
7 background-color: #aaa; | 7 background-color: #aaa; |
8 position: relative; | 8 position: relative; |
9 min-height: 10px; | 9 min-height: 10px; |
10 } | 10 } |
(...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
126 <img data-expected-height="25" style="max-height:50%" src="../images/resourc
es/blue-100.png"> | 126 <img data-expected-height="25" style="max-height:50%" src="../images/resourc
es/blue-100.png"> |
127 <img data-expected-height="25" style="max-height:50%" src="../images/resourc
es/green-10.png"> | 127 <img data-expected-height="25" style="max-height:50%" src="../images/resourc
es/green-10.png"> |
128 <img data-expected-height="10" style="max-height:-webkit-min-content;height:
1000px;" src="../images/resources/blue-10.png"> | 128 <img data-expected-height="10" style="max-height:-webkit-min-content;height:
1000px;" src="../images/resources/blue-10.png"> |
129 <img data-expected-height="100" style="max-height:-webkit-max-content;height
:1000px;" src="../images/resources/green-100.png"> | 129 <img data-expected-height="100" style="max-height:-webkit-max-content;height
:1000px;" src="../images/resources/green-100.png"> |
130 <img data-expected-height="50" style="max-height:-webkit-fill-available" src
="../images/resources/blue-100.png"> | 130 <img data-expected-height="50" style="max-height:-webkit-fill-available" src
="../images/resources/blue-100.png"> |
131 <img data-expected-height="10" style="max-height:-webkit-fit-content;height:
1000px" src="../images/resources/green-10.png"> | 131 <img data-expected-height="10" style="max-height:-webkit-fit-content;height:
1000px" src="../images/resources/green-10.png"> |
132 </div> | 132 </div> |
133 | 133 |
134 <!-- tests that images can shrink below their CSS height with min-height: min-co
ntent --> | 134 <!-- tests that images can shrink below their CSS height with min-height: min-co
ntent --> |
135 <div class="flexbox column" style="height:50px"> | 135 <div class="flexbox column" style="height:50px"> |
136 <img data-expected-height="50" style="-webkit-flex-shrink:1;height:1000px;mi
n-height:-webkit-min-content;" src="../images/resources/blue-10.png"> | 136 <img data-expected-height="50" style="flex-shrink:1;height:1000px;min-height
:-webkit-min-content;" src="../images/resources/blue-10.png"> |
137 </div> | 137 </div> |
138 | 138 |
139 <!-- tests that text can shrink below its CSS height with min-height: min-conten
t --> | 139 <!-- tests that text can shrink below its CSS height with min-height: min-conten
t --> |
140 <div class="flexbox column" style="height:50px"> | 140 <div class="flexbox column" style="height:50px"> |
141 <div data-expected-height="50" style="-webkit-flex-shrink:1;height:1000px;mi
n-height:-webkit-min-content;" src="../images/resources/blue-10.png"> | 141 <div data-expected-height="50" style="flex-shrink:1;height:1000px;min-height
:-webkit-min-content;" src="../images/resources/blue-10.png"> |
142 Some text<br> | 142 Some text<br> |
143 Some more text | 143 Some more text |
144 </div> | 144 </div> |
145 </div> | 145 </div> |
146 | 146 |
147 <!-- tests that images can shrink below their CSS width with min-width: min-cont
ent --> | 147 <!-- tests that images can shrink below their CSS width with min-width: min-cont
ent --> |
148 <div class="flexbox" style="width:50px"> | 148 <div class="flexbox" style="width:50px"> |
149 <img data-expected-width="50" style="-webkit-flex-shrink:1;width:1000px;min-
width:-webkit-min-content;" src="../images/resources/blue-10.png"> | 149 <img data-expected-width="50" style="flex-shrink:1;width:1000px;min-width:-w
ebkit-min-content;" src="../images/resources/blue-10.png"> |
150 </div> | 150 </div> |
151 | 151 |
152 <!-- tests that min-width expands the width of flex items beyond the width of th
e flexbox --> | 152 <!-- tests that min-width expands the width of flex items beyond the width of th
e flexbox --> |
153 <div class="flexbox column" style="width:50px"> | 153 <div class="flexbox column" style="width:50px"> |
154 <img data-expected-width="60" style="min-width:60px" src="../images/resource
s/blue-100.png"> | 154 <img data-expected-width="60" style="min-width:60px" src="../images/resource
s/blue-100.png"> |
155 <img data-expected-width="60" style="min-width:60px" src="../images/resource
s/green-10.png"> | 155 <img data-expected-width="60" style="min-width:60px" src="../images/resource
s/green-10.png"> |
156 <img data-expected-width="75" style="min-width:150%" src="../images/resource
s/blue-100.png"> | 156 <img data-expected-width="75" style="min-width:150%" src="../images/resource
s/blue-100.png"> |
157 <img data-expected-width="75" style="min-width:150%" src="../images/resource
s/green-10.png"> | 157 <img data-expected-width="75" style="min-width:150%" src="../images/resource
s/green-10.png"> |
158 <img data-expected-width="100" style="min-width:-webkit-min-content" src="..
/images/resources/blue-100.png"> | 158 <img data-expected-width="100" style="min-width:-webkit-min-content" src="..
/images/resources/blue-100.png"> |
159 <img data-expected-width="50" style="min-width:-webkit-min-content" src="../
images/resources/green-10.png"> | 159 <img data-expected-width="50" style="min-width:-webkit-min-content" src="../
images/resources/green-10.png"> |
(...skipping 15 matching lines...) Expand all Loading... |
175 <img data-expected-width="10" style="max-width:-webkit-min-content" src="../
images/resources/green-10.png"> | 175 <img data-expected-width="10" style="max-width:-webkit-min-content" src="../
images/resources/green-10.png"> |
176 <img data-expected-width="50" style="max-width:-webkit-max-content" src="../
images/resources/blue-100.png"> | 176 <img data-expected-width="50" style="max-width:-webkit-max-content" src="../
images/resources/blue-100.png"> |
177 <img data-expected-width="10" style="max-width:-webkit-max-content" src="../
images/resources/green-10.png"> | 177 <img data-expected-width="10" style="max-width:-webkit-max-content" src="../
images/resources/green-10.png"> |
178 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/blue-100.png"> | 178 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/blue-100.png"> |
179 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/green-10.png"> | 179 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/green-10.png"> |
180 <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../
images/resources/blue-100.png"> | 180 <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../
images/resources/blue-100.png"> |
181 <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../
images/resources/green-10.png"> | 181 <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../
images/resources/green-10.png"> |
182 </div> | 182 </div> |
183 | 183 |
184 </html> | 184 </html> |
OLD | NEW |