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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/orthogonal-flex-directions.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/order-painting.html ('k') | LayoutTests/css3/flexbox/overflow-keep-scrollpos.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: #aaa; 10 background-color: #aaa;
11 position: relative; 11 position: relative;
12 } 12 }
13 .flexbox > * { 13 .flexbox > * {
14 -webkit-flex: none; 14 flex: none;
15 } 15 }
16 .flexbox > :nth-child(1) { 16 .flexbox > :nth-child(1) {
17 background-color: blue; 17 background-color: blue;
18 } 18 }
19 .flexbox > :nth-child(2) { 19 .flexbox > :nth-child(2) {
20 background-color: green; 20 background-color: green;
21 } 21 }
22 22
23 .flexbox > div > :nth-child(1) { 23 .flexbox > div > :nth-child(1) {
24 background-color: pink; 24 background-color: pink;
25 } 25 }
26 .flexbox > div > :nth-child(2) { 26 .flexbox > div > :nth-child(2) {
27 background-color: purple; 27 background-color: purple;
28 } 28 }
29 29
30 .flexbox > div > div > :nth-child(1) { 30 .flexbox > div > div > :nth-child(1) {
31 background-color: red; 31 background-color: red;
32 } 32 }
33 .flexbox > div > div > :nth-child(2) { 33 .flexbox > div > div > :nth-child(2) {
34 background-color: yellow; 34 background-color: yellow;
35 } 35 }
36 36
37 .nested { 37 .nested {
38 display: -webkit-flex; 38 display: flex;
39 background-color: #ddd; 39 background-color: #ddd;
40 } 40 }
41 41
42 .rtl { 42 .rtl {
43 direction: rtl; 43 direction: rtl;
44 } 44 }
45 .bt { 45 .bt {
46 -webkit-writing-mode: horizontal-bt; 46 -webkit-writing-mode: horizontal-bt;
47 } 47 }
48 .vertical-rl { 48 .vertical-rl {
49 -webkit-writing-mode: vertical-rl; 49 -webkit-writing-mode: vertical-rl;
50 } 50 }
51 .vertical-lr { 51 .vertical-lr {
52 -webkit-writing-mode: vertical-lr; 52 -webkit-writing-mode: vertical-lr;
53 } 53 }
54 .row-reverse { 54 .row-reverse {
55 -webkit-flex-flow: row-reverse; 55 flex-flow: row-reverse;
56 } 56 }
57 .column { 57 .column {
58 -webkit-flex-flow: column; 58 flex-flow: column;
59 } 59 }
60 .column-reverse { 60 .column-reverse {
61 -webkit-flex-flow: column-reverse; 61 flex-flow: column-reverse;
62 } 62 }
63 63
64 .align-start { 64 .align-start {
65 -webkit-align-self: flex-start; 65 align-self: flex-start;
66 } 66 }
67 </style> 67 </style>
68 <script src="../../resources/check-layout.js"></script> 68 <script src="../../resources/check-layout.js"></script>
69 <body onload="checkLayout('.flexbox')"> 69 <body onload="checkLayout('.flexbox')">
70 70
71 <div class="flexbox"> 71 <div class="flexbox">
72 <div class="column nested"> 72 <div class="column nested">
73 <div data-expected-height="50" style="-webkit-flex: 1 0 0; width: 100px; "></div> 73 <div data-expected-height="50" style="flex: 1 0 0; width: 100px;"></div>
74 <div data-expected-height="50" style="-webkit-flex: 1 0 0; width: 100px; "></div> 74 <div data-expected-height="50" style="flex: 1 0 0; width: 100px;"></div>
75 </div> 75 </div>
76 <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></ div> 76 <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
77 </div> 77 </div>
78 78
79 <div class="flexbox"> 79 <div class="flexbox">
80 <div class="column nested align-start"> 80 <div class="column nested align-start">
81 <div data-expected-height="0" style="-webkit-flex: 1 0 0; width: 100px;" ></div> 81 <div data-expected-height="0" style="flex: 1 0 0; width: 100px;"></div>
82 <div data-expected-height="0" style="-webkit-flex: 1 0 0; width: 100px;" ></div> 82 <div data-expected-height="0" style="flex: 1 0 0; width: 100px;"></div>
83 </div> 83 </div>
84 <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></ div> 84 <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
85 </div> 85 </div>
86 86
87 <div class="flexbox"> 87 <div class="flexbox">
88 <div class="column nested align-start" style="height: 50px"> 88 <div class="column nested align-start" style="height: 50px">
89 <div data-expected-height="25" style="-webkit-flex: 1 0 0; width: 100px; "></div> 89 <div data-expected-height="25" style="flex: 1 0 0; width: 100px;"></div>
90 <div data-expected-height="25" style="-webkit-flex: 1 0 0; width: 100px; "></div> 90 <div data-expected-height="25" style="flex: 1 0 0; width: 100px;"></div>
91 </div> 91 </div>
92 <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></ div> 92 <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
93 </div> 93 </div>
94 94
95 <div class="flexbox"> 95 <div class="flexbox">
96 <div class="column nested" style="height: 50px"> 96 <div class="column nested" style="height: 50px">
97 <div class="nested" style="-webkit-flex: 1; width: 100px;"> 97 <div class="nested" style="flex: 1; width: 100px;">
98 <div data-expected-height="25" style="-webkit-flex: 1 0 auto;"></div > 98 <div data-expected-height="25" style="flex: 1 0 auto;"></div>
99 <div data-expected-height="25" style="-webkit-flex: 1 0 auto;"></div > 99 <div data-expected-height="25" style="flex: 1 0 auto;"></div>
100 </div> 100 </div>
101 <div style="-webkit-flex: 1;"></div> 101 <div style="flex: 1;"></div>
102 </div> 102 </div>
103 <div data-expected-width="500" style="-webkit-flex: 1 0 0; height:100px;"></ div> 103 <div data-expected-width="500" style="flex: 1 0 0; height:100px;"></div>
104 </div> 104 </div>
105 105
106 <div class="flexbox column" style="height: 100px"> 106 <div class="flexbox column" style="height: 100px">
107 <div class="row-reverse nested" style="-webkit-flex: 1; width: 100px;"> 107 <div class="row-reverse nested" style="flex: 1; width: 100px;">
108 <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div> 108 <div data-expected-width="50" style="flex: 1 0 auto;"></div>
109 <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div> 109 <div data-expected-width="50" style="flex: 1 0 auto;"></div>
110 </div> 110 </div>
111 <div data-expected-height="50" style="-webkit-flex: 1 0 0;"></div> 111 <div data-expected-height="50" style="flex: 1 0 0;"></div>
112 </div> 112 </div>
113 113
114 <div class="flexbox column-reverse" style="height: 100px"> 114 <div class="flexbox column-reverse" style="height: 100px">
115 <div class="row-reverse nested" style="-webkit-flex: 1; width: 100px;"> 115 <div class="row-reverse nested" style="flex: 1; width: 100px;">
116 <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div> 116 <div data-expected-width="50" style="flex: 1 0 auto;"></div>
117 <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div> 117 <div data-expected-width="50" style="flex: 1 0 auto;"></div>
118 </div> 118 </div>
119 <div data-expected-height="50" style="-webkit-flex: 1 0 0;"></div> 119 <div data-expected-height="50" style="flex: 1 0 0;"></div>
120 </div> 120 </div>
121 121
122 <div class="flexbox vertical-lr" style="height: 100px"> 122 <div class="flexbox vertical-lr" style="height: 100px">
123 <div class="column nested" style="-webkit-flex: 1; width: 100px;"> 123 <div class="column nested" style="flex: 1; width: 100px;">
124 <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div> 124 <div data-expected-width="50" style="flex: 1 0 auto;"></div>
125 <div data-expected-width="50" style="-webkit-flex: 1 0 auto;"></div> 125 <div data-expected-width="50" style="flex: 1 0 auto;"></div>
126 </div> 126 </div>
127 <div data-expected-height="50" style="-webkit-flex: 1 0 0;"></div> 127 <div data-expected-height="50" style="flex: 1 0 0;"></div>
128 </div> 128 </div>
129 129
130 </body> 130 </body>
131 </html> 131 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/order-painting.html ('k') | LayoutTests/css3/flexbox/overflow-keep-scrollpos.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698