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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/true-centering.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/style-change.html ('k') | LayoutTests/css3/flexbox/writing-modes.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 .flexbox { 4 .flexbox {
5 width: 100px; 5 width: 100px;
6 height: 100px; 6 height: 100px;
7 display: -webkit-flex; 7 display: flex;
8 background-color: #aaa; 8 background-color: #aaa;
9 position: relative; 9 position: relative;
10 } 10 }
11 .flexbox > div { 11 .flexbox > div {
12 height: 110px; 12 height: 110px;
13 width: 60px; 13 width: 60px;
14 -webkit-flex: none; 14 flex: none;
15 } 15 }
16 .vertical > div { 16 .vertical > div {
17 width: 110px; 17 width: 110px;
18 height: 60px; 18 height: 60px;
19 } 19 }
20 .flexbox :nth-child(1) { 20 .flexbox :nth-child(1) {
21 background-color: blue; 21 background-color: blue;
22 } 22 }
23 .flexbox :nth-child(2) { 23 .flexbox :nth-child(2) {
24 background-color: green; 24 background-color: green;
(...skipping 10 matching lines...) Expand all
35 .horizontal-bt { 35 .horizontal-bt {
36 -webkit-writing-mode: horizontal-bt; 36 -webkit-writing-mode: horizontal-bt;
37 } 37 }
38 .vertical-rl { 38 .vertical-rl {
39 -webkit-writing-mode: vertical-rl; 39 -webkit-writing-mode: vertical-rl;
40 } 40 }
41 .vertical-lr { 41 .vertical-lr {
42 -webkit-writing-mode: vertical-lr; 42 -webkit-writing-mode: vertical-lr;
43 } 43 }
44 .row-reverse { 44 .row-reverse {
45 -webkit-flex-flow: row-reverse; 45 flex-flow: row-reverse;
46 } 46 }
47 .column { 47 .column {
48 -webkit-flex-flow: column; 48 flex-flow: column;
49 } 49 }
50 .column-reverse { 50 .column-reverse {
51 -webkit-flex-flow: column-reverse; 51 flex-flow: column-reverse;
52 } 52 }
53 </style> 53 </style>
54 <script src="../../resources/check-layout.js"></script> 54 <script src="../../resources/check-layout.js"></script>
55 <body onload="checkLayout('.flexbox')"> 55 <body onload="checkLayout('.flexbox')">
56 56
57 <div class="flexbox" style="-webkit-align-items: center; -webkit-justify-content : center;"> 57 <div class="flexbox" style="align-items: center; justify-content: center;">
58 <div data-offset-x="-10" data-offset-y="-5"></div> 58 <div data-offset-x="-10" data-offset-y="-5"></div>
59 <div data-offset-x="50" data-offset-y="-5"></div> 59 <div data-offset-x="50" data-offset-y="-5"></div>
60 </div> 60 </div>
61 61
62 <div class="flexbox row-reverse" style="-webkit-align-items: center; -webkit-jus tify-content: center;"> 62 <div class="flexbox row-reverse" style="align-items: center; justify-content: ce nter;">
63 <div data-offset-x="50" data-offset-y="-5"></div> 63 <div data-offset-x="50" data-offset-y="-5"></div>
64 <div data-offset-x="-10" data-offset-y="-5"></div> 64 <div data-offset-x="-10" data-offset-y="-5"></div>
65 </div> 65 </div>
66 66
67 <div class="flexbox column vertical" style="-webkit-align-items: center; -webkit -justify-content: center;"> 67 <div class="flexbox column vertical" style="align-items: center; justify-content : center;">
68 <div data-offset-x="-5" data-offset-y="-10"></div> 68 <div data-offset-x="-5" data-offset-y="-10"></div>
69 <div data-offset-x="-5" data-offset-y="50"></div> 69 <div data-offset-x="-5" data-offset-y="50"></div>
70 </div> 70 </div>
71 71
72 <div class="flexbox column-reverse vertical" style="-webkit-align-items: center; -webkit-justify-content: center;"> 72 <div class="flexbox column-reverse vertical" style="align-items: center; justify -content: center;">
73 <div data-offset-x="-5" data-offset-y="50"></div> 73 <div data-offset-x="-5" data-offset-y="50"></div>
74 <div data-offset-x="-5" data-offset-y="-10"></div> 74 <div data-offset-x="-5" data-offset-y="-10"></div>
75 </div> 75 </div>
76 76
77 <div class="flexbox" style="-webkit-align-items: center; -webkit-justify-content : space-around;"> 77 <div class="flexbox" style="align-items: center; justify-content: space-around;" >
78 <div data-offset-x="-10" data-offset-y="-5"></div> 78 <div data-offset-x="-10" data-offset-y="-5"></div>
79 <div data-offset-x="50" data-offset-y="-5"></div> 79 <div data-offset-x="50" data-offset-y="-5"></div>
80 </div> 80 </div>
81 81
82 <div class="flexbox" style="-webkit-align-items: flex-start; -webkit-justify-con tent: flex-start;"> 82 <div class="flexbox" style="align-items: flex-start; justify-content: flex-start ;">
83 <div data-offset-x=0 data-offset-y=0></div> 83 <div data-offset-x=0 data-offset-y=0></div>
84 <div data-offset-x=60 data-offset-y=0></div> 84 <div data-offset-x=60 data-offset-y=0></div>
85 </div> 85 </div>
86 86
87 <div class="flexbox" style="-webkit-align-items: flex-start; -webkit-justify-con tent: space-between;"> 87 <div class="flexbox" style="align-items: flex-start; justify-content: space-betw een;">
88 <div data-offset-x=0 data-offset-y=0></div> 88 <div data-offset-x=0 data-offset-y=0></div>
89 <div data-offset-x=60 data-offset-y=0></div> 89 <div data-offset-x=60 data-offset-y=0></div>
90 </div> 90 </div>
91 91
92 <script> 92 <script>
93 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r l']; 93 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r l'];
94 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; 94 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
95 var directions = ['ltr', 'rtl']; 95 var directions = ['ltr', 'rtl'];
96 96
97 var verticalFirstChildExpected = 'data-offset-x="-5" data-offset-y="-10"'; 97 var verticalFirstChildExpected = 'data-offset-x="-5" data-offset-y="-10"';
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
133 var firstChildExpected, lastChildExpected; 133 var firstChildExpected, lastChildExpected;
134 if (isHorizontal) { 134 if (isHorizontal) {
135 firstChildExpected = isReverse ? horizontalLastChildExpected : h orizontalFirstChildExpected; 135 firstChildExpected = isReverse ? horizontalLastChildExpected : h orizontalFirstChildExpected;
136 lastChildExpected = isReverse ? horizontalFirstChildExpected : h orizontalLastChildExpected; 136 lastChildExpected = isReverse ? horizontalFirstChildExpected : h orizontalLastChildExpected;
137 } else { 137 } else {
138 firstChildExpected = isReverse ? verticalLastChildExpected : ver ticalFirstChildExpected; 138 firstChildExpected = isReverse ? verticalLastChildExpected : ver ticalFirstChildExpected;
139 lastChildExpected = isReverse ? verticalFirstChildExpected : ver ticalLastChildExpected; 139 lastChildExpected = isReverse ? verticalFirstChildExpected : ver ticalLastChildExpected;
140 } 140 }
141 141
142 var container = document.createElement('div'); 142 var container = document.createElement('div');
143 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="-webkit-align-items: center; -webkit-justify-content: center;">\n' + 143 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="align-items: center; justify-content: center;">\n' +
144 '<div ' + firstChildExpected + '></div>\n' + 144 '<div ' + firstChildExpected + '></div>\n' +
145 '<div ' + lastChildExpected + '></div>\n' + 145 '<div ' + lastChildExpected + '></div>\n' +
146 '</div>'; 146 '</div>';
147 147
148 document.body.appendChild(container); 148 document.body.appendChild(container);
149 }) 149 })
150 }) 150 })
151 }) 151 })
152 </script> 152 </script>
153 153
154 </body> 154 </body>
155 </html> 155 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/style-change.html ('k') | LayoutTests/css3/flexbox/writing-modes.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698