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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-flow.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: whoops, a > went missing Created 5 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/flexbox/flex-align-max.html ('k') | LayoutTests/css3/flexbox/flex-flow-auto-margins.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 .flexbox { 7 .flexbox {
8 width: 600px; 8 width: 600px;
9 display: -webkit-flex; 9 display: flex;
10 background-color: grey; 10 background-color: grey;
11 } 11 }
12 .flexbox > div { 12 .flexbox > div {
13 height: 20px; 13 height: 20px;
14 width: 20px; 14 width: 20px;
15 border: 0; 15 border: 0;
16 } 16 }
17 17
18 .rtl { 18 .rtl {
19 direction: rtl; 19 direction: rtl;
20 } 20 }
21 21
22 .bt { 22 .bt {
23 -webkit-writing-mode: horizontal-bt; 23 -webkit-writing-mode: horizontal-bt;
24 } 24 }
25 25
26 .vertical-rl, .vertical-lr, .column, .column-reverse { 26 .vertical-rl, .vertical-lr, .column, .column-reverse {
27 height: 600px; 27 height: 600px;
28 } 28 }
29 29
30 .vertical-rl { 30 .vertical-rl {
31 -webkit-writing-mode: vertical-rl; 31 -webkit-writing-mode: vertical-rl;
32 } 32 }
33 33
34 .vertical-lr { 34 .vertical-lr {
35 -webkit-writing-mode: vertical-lr; 35 -webkit-writing-mode: vertical-lr;
36 } 36 }
37 37
38 .row-reverse { 38 .row-reverse {
39 -webkit-flex-flow: row-reverse; 39 flex-flow: row-reverse;
40 } 40 }
41 41
42 .column { 42 .column {
43 -webkit-flex-flow: column; 43 flex-flow: column;
44 } 44 }
45 45
46 .column-reverse { 46 .column-reverse {
47 -webkit-flex-flow: column-reverse; 47 flex-flow: column-reverse;
48 } 48 }
49 49
50 .flexbox > :nth-child(1) { 50 .flexbox > :nth-child(1) {
51 background-color: blue; 51 background-color: blue;
52 } 52 }
53 .flexbox > :nth-child(2) { 53 .flexbox > :nth-child(2) {
54 background-color: green; 54 background-color: green;
55 } 55 }
56 .flexbox > :nth-child(3) { 56 .flexbox > :nth-child(3) {
57 background-color: red; 57 background-color: red;
58 } 58 }
59 59
60 .flexbox > div > div { 60 .flexbox > div > div {
61 background-color: orange; 61 background-color: orange;
62 height: 10px; 62 height: 10px;
63 } 63 }
64 </style> 64 </style>
65 <script src="../../resources/check-layout.js"></script> 65 <script src="../../resources/check-layout.js"></script>
66 <body onload="checkLayout('.flexbox')"> 66 <body onload="checkLayout('.flexbox')">
67 67
68 <div class="flexbox"> 68 <div class="flexbox">
69 <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; ma rgin: 0 auto;"></div> 69 <div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
70 <div data-expected-width="350" data-offset-x="75" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-x="275"></div></div> 70 <div data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; -webkit- padding-start: 200px"><div data-offset-x="275"></div></div>
71 <div data-expected-width="75" data-offset-x="425" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div> 71 <div data-expected-width="75" data-offset-x="425" style="flex: 1 0 0; -webkit- margin-end: 100px;"></div>
72 </div> 72 </div>
73 73
74 <div class="flexbox rtl"> 74 <div class="flexbox rtl">
75 <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 75 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
76 <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-x="175"></div></div> 76 <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; -webkit -padding-start: 200px"><div data-offset-x="175"></div></div>
77 <div data-expected-width="75" data-offset-x="100" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div> 77 <div data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; -webkit- margin-end: 100px;"></div>
78 </div> 78 </div>
79 79
80 <div class="flexbox row-reverse"> 80 <div class="flexbox row-reverse">
81 <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; margin: 0 auto;"></div> 81 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
82 <div data-expected-width="350" data-offset-x="175" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-x="375"></div></div> 82 <div data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; -webkit -padding-start: 200px"><div data-offset-x="375"></div></div>
83 <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; -w ebkit-margin-end: 100px;"></div> 83 <div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; -webkit-ma rgin-end: 100px;"></div>
84 </div> 84 </div>
85 85
86 <div class="flexbox rtl row-reverse"> 86 <div class="flexbox rtl row-reverse">
87 <div data-expected-width="75" data-offset-x="0" style="-webkit-flex: 1 0 0; ma rgin: 0 auto;"></div> 87 <div data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
88 <div data-expected-width="350" data-offset-x="75" style="-webkit-flex: 2 0 0; -webkit-padding-start: 200px"><div data-offset-x="75"></div></div> 88 <div data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; -webkit- padding-start: 200px"><div data-offset-x="75"></div></div>
89 <div data-expected-width="75" data-offset-x="525" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div> 89 <div data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; -webkit- margin-end: 100px;"></div>
90 </div> 90 </div>
91 91
92 <div style="position: relative;"> 92 <div style="position: relative;">
93 <div class="flexbox column"> 93 <div class="flexbox column">
94 <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0; margin: auto 200px auto 150px;"></div> 94 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
95 <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0 ; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></d iv></div> 95 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; -webki t-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div >
96 <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0 ; -webkit-margin-end: 100px;"></div> 96 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; -webki t-margin-end: 100px;"></div>
97 </div> 97 </div>
98 </div> 98 </div>
99 99
100 <div style="position: relative;"> 100 <div style="position: relative;">
101 <div class="flexbox column-reverse"> 101 <div class="flexbox column-reverse">
102 <div data-expected-height="150" data-offset-y="450" style="-webkit-flex: 1 0 0 ; margin: auto 200px auto 150px;"></div> 102 <div data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin : auto 200px auto 150px;"></div>
103 <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0 ; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></d iv></div> 103 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; -webki t-padding-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div >
104 <div data-expected-height="150" data-offset-y="0" style="-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div> 104 <div data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; -webkit- margin-end: 100px;"></div>
105 </div> 105 </div>
106 </div> 106 </div>
107 107
108 <div style="position: relative;"> 108 <div style="position: relative;">
109 <div class="flexbox column rtl"> 109 <div class="flexbox column rtl">
110 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="- webkit-flex: 1 0 0; margin: auto 100px auto 50px;"></div> 110 <div data-expected-height="150" data-offset-y="0" data-offset-x="480" style="f lex: 1 0 0; margin: auto 100px auto 50px;"></div>
111 <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0 ; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></d iv></div> 111 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; -webki t-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div >
112 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style= "-webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div> 112 <div data-expected-height="150" data-offset-y="450" data-offset-x="580" style= "flex: 1 0 0; -webkit-margin-end: 100px;"></div>
113 </div> 113 </div>
114 </div> 114 </div>
115 115
116 <div style="position: relative;"> 116 <div style="position: relative;">
117 <div class="flexbox column-reverse rtl"> 117 <div class="flexbox column-reverse rtl">
118 <div data-expected-height="150" data-offset-y="450" data-offset-x="480" style= "-webkit-flex: 1 0 0; margin: auto 100px auto 50px;"></div> 118 <div data-expected-height="150" data-offset-y="450" data-offset-x="480" style= "flex: 1 0 0; margin: auto 100px auto 50px;"></div>
119 <div data-expected-height="300" data-offset-y="150" style="-webkit-flex: 2 0 0 ; -webkit-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></d iv></div> 119 <div data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; -webki t-padding-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div >
120 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="- webkit-flex: 1 0 0; -webkit-margin-end: 100px;"></div> 120 <div data-expected-height="150" data-offset-y="0" data-offset-x="580" style="f lex: 1 0 0; -webkit-margin-end: 100px;"></div>
121 </div> 121 </div>
122 </div> 122 </div>
123 123
124 <div style="position: relative;"> 124 <div style="position: relative;">
125 <div data-expected-height="600" class="flexbox vertical-lr column"> 125 <div data-expected-height="600" class="flexbox vertical-lr column">
126 <div data-offset-x="0" data-expected-width="500" style="-webkit-flex: 1 0 0; m in-width: 300px"></div> 126 <div data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width : 300px"></div>
127 <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style=" -webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> 127 <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style=" flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
128 </div> 128 </div>
129 </div> 129 </div>
130 130
131 <div style="position: relative;"> 131 <div style="position: relative;">
132 <div data-expected-height="600" class="flexbox vertical-lr column-reverse"> 132 <div data-expected-height="600" class="flexbox vertical-lr column-reverse">
133 <div data-offset-x="100" data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px"></div> 133 <div data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-wid th: 300px"></div>
134 <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="-w ebkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> 134 <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="fl ex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <div style="position: relative;"> 138 <div style="position: relative;">
139 <div data-expected-height="600" class="flexbox vertical-rl column"> 139 <div data-expected-height="600" class="flexbox vertical-rl column">
140 <div data-offset-x="100" data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div> 140 <div data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-wid th: 300px; margin-bottom: 100px"></div>
141 <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="-w ebkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> 141 <div data-offset-x="0" data-offset-y="100" data-expected-width="100" style="fl ex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
142 </div> 142 </div>
143 </div> 143 </div>
144 144
145 <div style="position: relative;"> 145 <div style="position: relative;">
146 <div data-expected-height="600" class="flexbox vertical-rl column-reverse"> 146 <div data-expected-height="600" class="flexbox vertical-rl column-reverse">
147 <div data-offset-x="0" data-expected-width="500" style="-webkit-flex: 1 0 0; m in-width: 300px; margin-bottom: 100px"></div> 147 <div data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width : 300px; margin-bottom: 100px"></div>
148 <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style=" -webkit-flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div> 148 <div data-offset-x="500" data-offset-y="100" data-expected-width="100" style=" flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
149 </div> 149 </div>
150 </div> 150 </div>
151 151
152 </body> 152 </body>
153 </html> 153 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/flex-align-max.html ('k') | LayoutTests/css3/flexbox/flex-flow-auto-margins.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698