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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-justify-content.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-item-child-overflow.html ('k') | LayoutTests/css3/flexbox/flex-longhand-parsing.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 div { 13 .flexbox div {
14 height: 20px; 14 height: 20px;
15 border: 0; 15 border: 0;
16 -webkit-flex: none; 16 flex: none;
17 } 17 }
18 18
19 .flexbox :nth-child(1) { 19 .flexbox :nth-child(1) {
20 background-color: blue; 20 background-color: blue;
21 } 21 }
22 .flexbox :nth-child(2) { 22 .flexbox :nth-child(2) {
23 background-color: green; 23 background-color: green;
24 } 24 }
25 .flexbox :nth-child(3) { 25 .flexbox :nth-child(3) {
26 background-color: red; 26 background-color: red;
27 } 27 }
28 </style> 28 </style>
29 <script src="../../resources/check-layout.js"></script> 29 <script src="../../resources/check-layout.js"></script>
30 <body onload="checkLayout('.flexbox')"> 30 <body onload="checkLayout('.flexbox')">
31 <div class="flexbox"> 31 <div class="flexbox">
32 <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; m ax-width: 100px;"></div> 32 <div data-expected-width="100" data-offset-x="0" style="flex: 1 0 0; max-width : 100px;"></div>
33 <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div > 33 <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div >
34 <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div > 34 <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div >
35 </div> 35 </div>
36 36
37 <div class="flexbox" style="-webkit-justify-content: flex-end"> 37 <div class="flexbox" style="justify-content: flex-end">
38 <div data-expected-width="100" data-offset-x="300" style="-webkit-flex: 0 0 10 0px;"></div> 38 <div data-expected-width="100" data-offset-x="300" style="flex: 0 0 100px;"></ div>
39 <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div > 39 <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div >
40 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div > 40 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div >
41 </div> 41 </div>
42 42
43 <div class="flexbox" style="-webkit-justify-content: center"> 43 <div class="flexbox" style="justify-content: center">
44 <div data-expected-width="100" data-offset-x="150" style="-webkit-flex: 1 0 0; max-width: 100px;"></div> 44 <div data-expected-width="100" data-offset-x="150" style="flex: 1 0 0; max-wid th: 100px;"></div>
45 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div > 45 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div >
46 <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div > 46 <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div >
47 </div> 47 </div>
48 48
49 <div class="flexbox" style="-webkit-justify-content: center"> 49 <div class="flexbox" style="justify-content: center">
50 <div data-expected-width="200" data-offset-x="0" style="-webkit-flex: 1 100px; "></div> 50 <div data-expected-width="200" data-offset-x="0" style="flex: 1 100px;"></div>
51 <div data-expected-width="200" data-offset-x="200" style="-webkit-flex: 1 100p x;"></div> 51 <div data-expected-width="200" data-offset-x="200" style="flex: 1 100px;"></di v>
52 <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 100p x;"></div> 52 <div data-expected-width="200" data-offset-x="400" style="flex: 1 100px;"></di v>
53 </div> 53 </div>
54 54
55 <!-- True centering on overflow. --> 55 <!-- True centering on overflow. -->
56 <div class="flexbox" style="-webkit-justify-content: center"> 56 <div class="flexbox" style="justify-content: center">
57 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v> 57 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v>
58 </div> 58 </div>
59 59
60 <div class="flexbox" style="-webkit-justify-content: space-between"> 60 <div class="flexbox" style="justify-content: space-between">
61 <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; m ax-width: 100px;"></div> 61 <div data-expected-width="100" data-offset-x="0" style="flex: 1 0 0; max-width : 100px;"></div>
62 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div > 62 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div >
63 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div > 63 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div >
64 </div> 64 </div>
65 65
66 <div class="flexbox" style="-webkit-justify-content: space-between"> 66 <div class="flexbox" style="justify-content: space-between">
67 <div data-expected-width="200" data-offset-x="0" style="-webkit-flex: 1 100px; "></div> 67 <div data-expected-width="200" data-offset-x="0" style="flex: 1 100px;"></div>
68 <div data-expected-width="200" data-offset-x="200" style="-webkit-flex: 1 100p x;"></div> 68 <div data-expected-width="200" data-offset-x="200" style="flex: 1 100px;"></di v>
69 <div data-expected-width="200" data-offset-x="400" style="-webkit-flex: 1 100p x;"></div> 69 <div data-expected-width="200" data-offset-x="400" style="flex: 1 100px;"></di v>
70 </div> 70 </div>
71 71
72 <!-- If there's only one child, we justify-content: flex-start. --> 72 <!-- If there's only one child, we justify-content: flex-start. -->
73 <div class="flexbox" style="-webkit-justify-content: space-between"> 73 <div class="flexbox" style="justify-content: space-between">
74 <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; m ax-width: 100px;"></div> 74 <div data-expected-width="100" data-offset-x="0" style="flex: 1 0 0; max-width : 100px;"></div>
75 </div> 75 </div>
76 76
77 <div class="flexbox" style="-webkit-justify-content: space-around"> 77 <div class="flexbox" style="justify-content: space-around">
78 <div data-expected-width="100" data-offset-x="50" style="-webkit-flex: 1 0 0; max-width: 100px;"></div> 78 <div data-expected-width="100" data-offset-x="50" style="flex: 1 0 0; max-widt h: 100px;"></div>
79 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div > 79 <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div >
80 <div data-expected-width="100" data-offset-x="450" style="width: 100px;"></div > 80 <div data-expected-width="100" data-offset-x="450" style="width: 100px;"></div >
81 </div> 81 </div>
82 82
83 <!-- If there's only one child, we justify-content center. --> 83 <!-- If there's only one child, we justify-content center. -->
84 <div class="flexbox" style="-webkit-justify-content: space-around"> 84 <div class="flexbox" style="justify-content: space-around">
85 <div data-expected-width="100" data-offset-x="250" style="-webkit-flex: 1 0 0; max-width: 100px;"></div> 85 <div data-expected-width="100" data-offset-x="250" style="flex: 1 0 0; max-wid th: 100px;"></div>
86 </div> 86 </div>
87 87
88 <!-- True centering on overflow. --> 88 <!-- True centering on overflow. -->
89 <div class="flexbox" style="-webkit-justify-content: space-around"> 89 <div class="flexbox" style="justify-content: space-around">
90 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v> 90 <div data-expected-width="800" data-offset-x="-100" style="width: 800px;"></di v>
91 </div> 91 </div>
92 92
93 <!-- Make sure we don't crash with no children. --> 93 <!-- Make sure we don't crash with no children. -->
94 <div class="flexbox" style="-webkit-justify-content: space-around"></div> 94 <div class="flexbox" style="justify-content: space-around"></div>
95 95
96 <!-- margin:auto applies before justify-content. --> 96 <!-- margin:auto applies before justify-content. -->
97 <div class="flexbox" style="-webkit-justify-content: flex-end"> 97 <div class="flexbox" style="justify-content: flex-end">
98 <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div> 98 <div data-expected-width="100" data-offset-x="0" style="width: 100px;"></div>
99 <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin -right: auto"></div> 99 <div data-expected-width="100" data-offset-x="100" style="width: 100px; margin -right: auto"></div>
100 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div > 100 <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div >
101 </div> 101 </div>
102 102
103 <!-- The justify-content does nothing here because we are shrinking. --> 103 <!-- The justify-content does nothing here because we are shrinking. -->
104 <div class="flexbox" style="-webkit-justify-content: flex-end"> 104 <div class="flexbox" style="justify-content: flex-end">
105 <div data-expected-width="200" data-offset-x="0" style="-webkit-flex: 0 1 300p x;"></div> 105 <div data-expected-width="200" data-offset-x="0" style="flex: 0 1 300px;"></di v>
106 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div > 106 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div >
107 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div > 107 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div >
108 </div> 108 </div>
109 109
110 <!-- We overflow the flexbox (no negative flexing) and align the end. The overfl ow is to the left. --> 110 <!-- We overflow the flexbox (no negative flexing) and align the end. The overfl ow is to the left. -->
111 <div class="flexbox" style="-webkit-justify-content: flex-end"> 111 <div class="flexbox" style="justify-content: flex-end">
112 <div data-expected-width="300" data-offset-x="-100" style="-webkit-flex: 1 0 3 00px;"></div> 112 <div data-expected-width="300" data-offset-x="-100" style="flex: 1 0 300px;">< /div>
113 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div > 113 <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div >
114 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div > 114 <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div >
115 </div> 115 </div>
116 116
117 </body> 117 </body>
118 </html> 118 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/flex-item-child-overflow.html ('k') | LayoutTests/css3/flexbox/flex-longhand-parsing.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698