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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-algorithm-with-margins.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: 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
« LayoutTests/css3/flexbox/anonymous-block-merge-crash.html ('K') | « LayoutTests/css3/flexbox/flex-algorithm-min-max.html ('k') | LayoutTests/css3/flexbox/flex-align.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 <link href="resources/flexbox.css" rel="stylesheet"> 3 <link href="resources/flexbox.css" rel="stylesheet">
4 <style> 4 <style>
5 body { 5 body {
6 margin: 0; 6 margin: 0;
7 } 7 }
8 .flexbox { 8 .flexbox {
9 width: 600px; 9 width: 600px;
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 } 16 }
17 17
18 .flexbox :nth-child(1) { 18 .flexbox :nth-child(1) {
19 background-color: blue; 19 background-color: blue;
20 } 20 }
21 .flexbox :nth-child(2) { 21 .flexbox :nth-child(2) {
22 background-color: green; 22 background-color: green;
23 } 23 }
24 .flexbox :nth-child(3) { 24 .flexbox :nth-child(3) {
25 background-color: red; 25 background-color: red;
26 } 26 }
27 27
28 .flex1 { 28 .flex1 {
29 -webkit-flex: 1; 29 flex: 1;
30 -moz-flex: 1; 30 -moz-flex: 1;
31 } 31 }
32 .flex2 { 32 .flex2 {
33 -webkit-flex: 2; 33 flex: 2;
34 -moz-flex: 2; 34 -moz-flex: 2;
35 } 35 }
36 .flex4 { 36 .flex4 {
37 -webkit-flex: 4; 37 flex: 4;
38 -moz-flex: 4; 38 -moz-flex: 4;
39 } 39 }
40 .flex1-0-0 { 40 .flex1-0-0 {
41 -webkit-flex: 1 0 0px; 41 flex: 1 0 0px;
42 -moz-flex: 1 0 0px; 42 -moz-flex: 1 0 0px;
43 } 43 }
44 .flex2-0-0 { 44 .flex2-0-0 {
45 -webkit-flex: 2 0 0px; 45 flex: 2 0 0px;
46 -moz-flex: 2 0 0px; 46 -moz-flex: 2 0 0px;
47 } 47 }
48 </style> 48 </style>
49 <script src="../../resources/check-layout.js"></script> 49 <script src="../../resources/check-layout.js"></script>
50 <body onload="checkLayout('.flexbox')"> 50 <body onload="checkLayout('.flexbox')">
51 <div class="flexbox"> 51 <div class="flexbox">
52 <div data-expected-width="200" class="flex1-0-0"></div> 52 <div data-expected-width="200" class="flex1-0-0"></div>
53 <div data-expected-width="100" data-offset-x="250" class="flex-none" style="wi dth: 100px; margin: 0 50px;"></div> 53 <div data-expected-width="100" data-offset-x="250" class="flex-none" style="wi dth: 100px; margin: 0 50px;"></div>
54 <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div> 54 <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
55 </div> 55 </div>
56 56
57 <div data-expected-height="120" class="flexbox"> 57 <div data-expected-height="120" class="flexbox">
58 <div data-expected-width="200" data-offset-y="50" class="flex1-0-0" style="mar gin: 50px 0;"></div> 58 <div data-expected-width="200" data-offset-y="50" class="flex1-0-0" style="mar gin: 50px 0;"></div>
59 <div data-expected-width="100" data-offset-x="250" class="flex-none" style="wi dth: 100px; margin: 0 50px"></div> 59 <div data-expected-width="100" data-offset-x="250" class="flex-none" style="wi dth: 100px; margin: 0 50px"></div>
60 <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div> 60 <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
61 </div> 61 </div>
62 62
63 <!-- Margins set to auto get space only if there's space available after flexing . --> 63 <!-- Margins set to auto get space only if there's space available after flexing . -->
64 <div class="flexbox"> 64 <div class="flexbox">
65 <div data-expected-width="200" class="flex1-0-0"></div> 65 <div data-expected-width="200" class="flex1-0-0"></div>
66 <div data-expected-width="200" data-offset-x="200" class="flex-none" style="wi dth: 200px; margin: 0 auto"></div> 66 <div data-expected-width="200" data-offset-x="200" class="flex-none" style="wi dth: 200px; margin: 0 auto"></div>
67 <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div> 67 <div data-expected-width="200" data-offset-x="400" class="flex1-0-0"></div>
68 </div> 68 </div>
69 69
70 <div class="flexbox"> 70 <div class="flexbox">
71 <div data-expected-width="100" class="flex1-0-0"></div> 71 <div data-expected-width="100" class="flex1-0-0"></div>
72 <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 2 0 10 0px; -moz-flex: 2 0 100px; margin-left: auto;"></div> 72 <div data-expected-width="300" data-offset-x="100" style="flex: 2 0 100px; -mo z-flex: 2 0 100px; margin-left: auto;"></div>
73 <div data-expected-width="100" data-offset-x="400" class="flex1-0-0" style="ma rgin-right: 100px"></div> 73 <div data-expected-width="100" data-offset-x="400" class="flex1-0-0" style="ma rgin-right: 100px"></div>
74 </div> 74 </div>
75 75
76 <!-- Margins set to auto don't have negative flex. --> 76 <!-- Margins set to auto don't have negative flex. -->
77 <div class="flexbox"> 77 <div class="flexbox">
78 <div data-expected-width="150" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1 300px"></div> 78 <div data-expected-width="150" style="flex: 1 1 300px; -moz-flex: 1 1 300px">< /div>
79 <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 30 0px; -moz-flex: 1 0 300px; margin: 0 auto;"></div> 79 <div data-expected-width="300" data-offset-x="150" style="flex: 1 0 300px; -mo z-flex: 1 0 300px; margin: 0 auto;"></div>
80 <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 30 0px; -moz-flex: 1 1 300px"></div> 80 <div data-expected-width="150" data-offset-x="450" style="flex: 1 1 300px; -mo z-flex: 1 1 300px"></div>
81 </div> 81 </div>
82 82
83 <div class="flexbox"> 83 <div class="flexbox">
84 <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 0 0 30 0px; -moz-flex: 0 0 300px; margin: 0 auto;"></div> 84 <div data-expected-width="300" data-offset-x="150" style="flex: 0 0 300px; -mo z-flex: 0 0 300px; margin: 0 auto;"></div>
85 </div> 85 </div>
86 86
87 <!-- margin: auto safe centers, which means it won't overflow to before the star t of the flexbox. --> 87 <!-- margin: auto safe centers, which means it won't overflow to before the star t of the flexbox. -->
88 <div class="flexbox"> 88 <div class="flexbox">
89 <div data-expected-width="700" data-offset-x="0" style="-webkit-flex: 0 0 700p x; -moz-flex: 0 0 700px; margin: 0 auto;"></div> 89 <div data-expected-width="700" data-offset-x="0" style="flex: 0 0 700px; -moz- flex: 0 0 700px; margin: 0 auto;"></div>
90 </div> 90 </div>
91 91
92 <div class="flexbox"> 92 <div class="flexbox">
93 <div data-expected-width="600" data-offset-x="0" style="-webkit-flex: 1 0 300p x; -moz-flex: 1 0 300px; margin: 0 auto;"></div> 93 <div data-expected-width="600" data-offset-x="0" style="flex: 1 0 300px; -moz- flex: 1 0 300px; margin: 0 auto;"></div>
94 </div> 94 </div>
95 95
96 <div class="flexbox"> 96 <div class="flexbox">
97 <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin: 0 auto;"> 97 <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin: 0 auto;">
98 <div style="width: 100px; height: 100%;"></div> 98 <div style="width: 100px; height: 100%;"></div>
99 </div> 99 </div>
100 </div> 100 </div>
101 101
102 <div class="flexbox" style="margin: 100px;"> 102 <div class="flexbox" style="margin: 100px;">
103 <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin: 0 auto;"></div> 103 <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin: 0 auto;"></div>
104 <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin : 0 auto;"></div> 104 <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin : 0 auto;"></div>
105 </div> 105 </div>
106 106
107 <div class="flexbox" style="padding: 100px;"> 107 <div class="flexbox" style="padding: 100px;">
108 <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 1 0 0p x; -moz-flex: 1 0 0px; margin: 0 auto;"></div> 108 <div data-expected-width="300" data-offset-x="100" style="flex: 1 0 0px; -moz- flex: 1 0 0px; margin: 0 auto;"></div>
109 <div data-expected-width="300" data-offset-x="400" style="-webkit-flex: 1 0 0e m; -moz-flex: 1 0 0em; margin: 0 auto;"></div> 109 <div data-expected-width="300" data-offset-x="400" style="flex: 1 0 0em; -moz- flex: 1 0 0em; margin: 0 auto;"></div>
110 </div> 110 </div>
111 111
112 <div class="flexbox"> 112 <div class="flexbox">
113 <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margi n: 0 auto;"></div> 113 <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margi n: 0 auto;"></div>
114 <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="pad ding: 0 100px;"></div> 114 <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="pad ding: 0 100px;"></div>
115 <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="mar gin-left: 100px;"></div> 115 <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="mar gin-left: 100px;"></div>
116 </div> 116 </div>
117 117
118 </body> 118 </body>
119 </html> 119 </html>
OLDNEW
« LayoutTests/css3/flexbox/anonymous-block-merge-crash.html ('K') | « LayoutTests/css3/flexbox/flex-algorithm-min-max.html ('k') | LayoutTests/css3/flexbox/flex-align.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698