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

Side by Side Diff: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-002-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 <html>
7 <head>
8 <title>CSS Reftest Reference</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
10 <meta charset="utf-8">
11 <style>
12 .flexContainer {
13 height: 60px;
14 width: 60px;
15 font: 10px sans-serif;
16 background: yellow;
17 float: left;
18 border: 1px solid black;
19 }
20 .flexContainer > * {
21 border: 1px dotted gray;
22 width: 28px;
23 height: 28px;
24 float: left;
25 }
26
27 /* The single-line flex containers' flex items are shrunk in main axis: */
28 .singleLineHoriz > * {
29 width: 18px;
30 }
31 .singleLineVert > * {
32 height: 18px;
33 float: none;
34 }
35 .hidden {
36 /* We use this to hide the "4" box in each of the multi-line chunks.
37 The testcase has 3 flex items in each flex container, but it's easier
38 to write this reference case w/ a hidden 4th box as a space-filler. */
39 visibility: hidden;
40 }
41 </style>
42 </head>
43 <body>
44 <!-- single-line (flex-wrap unspecified): -->
45 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
46 <div>1</div><div>2</div><div>3</div>
47 </div>
48 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
49 <div>3</div><div>2</div><div>1</div>
50 </div>
51 <div class="flexContainer singleLineVert"><!-- flex-flow: column -->
52 <div>1</div><div>2</div><div>3</div>
53 </div>
54 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
55 <div>3</div><div>2</div><div>1</div>
56 </div>
57
58 <div style="clear:both"></div>
59
60 <!-- now using "wrap", after flex-direction: -->
61 <div class="flexContainer"><!-- flex-flow: row wrap -->
62 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
63 </div>
64 <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
65 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
66 </div>
67 <div class="flexContainer"><!-- flex-flow: column wrap -->
68 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
69 </div>
70 <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
71 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
72 </div>
73
74 <div style="clear:both"></div>
75
76 <!-- now using "wrap", before flex-direction: -->
77 <div class="flexContainer"><!-- flex-flow: wrap row -->
78 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
79 </div>
80 <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
81 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
82 </div>
83 <div class="flexContainer"><!-- flex-flow: wrap column -->
84 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
85 </div>
86 <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
87 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
88 </div>
89
90 <div style="clear:both"></div>
91
92 <!-- now using "wrap-reverse", after flex-direction: -->
93 <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
94 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
95 </div>
96 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
97 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
98 </div>
99 <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
100 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
101 </div>
102 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
103 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
104 </div>
105
106 <div style="clear:both"></div>
107
108 <!-- now using "wrap-reverse", before flex-direction: -->
109 <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
110 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
111 </div>
112 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
113 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
114 </div>
115 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
116 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
117 </div>
118 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
119 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
120 </div>
121
122 <div style="clear:both"></div>
123
124 <!-- now just specifying flex-wrap (no flex-direction) -->
125 <div class="flexContainer"><!-- flex-flow: wrap -->
126 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
127 </div>
128 <div class="flexContainer"><!-- flex-flow: wrap-reverse -->
129 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
130 </div>
131
132 </body>
133 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698