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

Side by Side Diff: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-collapsed-item-horiz-001-expected.html

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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!-- In this reference case, we have blocks in place of the testcase's
7 flex containers. The testcase's collapsed flex items are entirely
8 absent here (and the remaining content is sized using exact pixel
9 values).
10 -->
11 <html>
12 <head>
13 <title>CSS Reftest Reference</title>
14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
15 <meta charset="utf-8">
16 <style>
17 .flexContainer {
18 display: flex;
19 background: yellow;
20 border: 1px dotted black;
21 float: left;
22 margin: 5px;
23 }
24 .flexContainer > * {
25 /* All flex items have 20px base size */
26 width: 20px;
27 }
28 .collapse {
29 flex-basis: 0;
30 height: 20px;
31 }
32 .flexible {
33 flex: 1 auto;
34 }
35 .heightTall {
36 height: 40px;
37 background: purple;
38 }
39 .heightAuto {
40 background: teal;
41 }
42 .heightShort {
43 height: 10px;
44 background: pink;
45 }
46 </style>
47 </head>
48 <body>
49 <!-- FIRST ROW: -->
50 <!-- Just one (collapsed) flex item, which ends up establishing
51 the container's size (even though it's collapsed): -->
52 <div class="flexContainer">
53 <div class="heightTall collapse"></div>
54 </div>
55
56 <div style="clear: both"></div>
57
58 <!-- SECOND ROW: -->
59 <!-- One collapsed flex item, one short flex item.
60 (Container ends up with collapsed item's height) -->
61 <div class="flexContainer">
62 <div class="heightTall collapse"></div>
63 <div class="heightShort"></div>
64 </div>
65 <!-- (same, but with items in opposite order) -->
66 <div class="flexContainer">
67 <div class="heightShort"></div>
68 <div class="heightTall collapse"></div>
69 </div>
70
71 <div style="clear: both"></div>
72
73 <!-- THIRD ROW: -->
74 <!-- One collapsed flex item, one stretched flex item.
75 (Container and stretched item end up with collapsed item's height) -->
76 <div class="flexContainer">
77 <div class="heightTall collapse"></div>
78 <div class="heightAuto"></div>
79 </div>
80 <!-- (again, with items in opposite order) -->
81 <div class="flexContainer">
82 <div class="heightAuto"></div>
83 <div class="heightTall collapse"></div>
84 </div>
85
86 <div style="clear: both"></div>
87
88 <!-- FOURTH ROW: -->
89 <!-- One collapsed flex item, one other flex item; both are flexible.
90 (The non-collapsed one should take all of the available width.) -->
91 <div class="flexContainer">
92 <div class="heightAuto collapse"></div>
93 <div class="heightTall flexible"></div>
94 </div>
95 <!-- (again, with items in opposite order) -->
96 <div class="flexContainer">
97 <div class="heightTall flexible"></div>
98 <div class="heightAuto collapse"></div>
99 </div>
100
101 </body>
102 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698