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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/flex-algorithm-min-max.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.html ('k') | LayoutTests/css3/flexbox/flex-algorithm-with-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 <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 .flex3 { 36 .flex3 {
37 -webkit-flex: 3; 37 flex: 3;
38 -moz-flex: 3; 38 -moz-flex: 3;
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 </style> 44 </style>
45 <script src="../../resources/check-layout.js"></script> 45 <script src="../../resources/check-layout.js"></script>
46 <body onload="checkLayout('.flexbox')"> 46 <body onload="checkLayout('.flexbox')">
47 <div class="flexbox"> 47 <div class="flexbox">
48 <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></d iv> 48 <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></d iv>
49 <div data-expected-width="250" class="flex1-0-0"></div> 49 <div data-expected-width="250" class="flex1-0-0"></div>
50 <div data-expected-width="250" class="flex1-0-0"></div> 50 <div data-expected-width="250" class="flex1-0-0"></div>
51 </div> 51 </div>
52 52
53 <!-- The first two flexitems should hit their max width and the third item fills the remaining space. --> 53 <!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
54 <div class="flexbox"> 54 <div class="flexbox">
55 <div data-expected-width="50" class="flex1-0-0" style="max-width: 50px;"></div > 55 <div data-expected-width="50" class="flex1-0-0" style="max-width: 50px;"></div >
56 <div data-expected-width="300" style="-webkit-flex: 4 0 0; -moz-flex: 4 0 0; m ax-width: 300px;"></div> 56 <div data-expected-width="300" style="flex: 4 0 0; -moz-flex: 4 0 0; max-width : 300px;"></div>
57 <div data-expected-width="250" style="-webkit-flex: 1 0 0; -moz-flex: 1 0 0">< /div> 57 <div data-expected-width="250" style="flex: 1 0 0; -moz-flex: 1 0 0"></div>
58 </div> 58 </div>
59 59
60 <div class="flexbox"> 60 <div class="flexbox">
61 <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></d iv> 61 <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></d iv>
62 <div data-expected-width="300" style="-webkit-flex: 1 0 200px; -moz-flex: 1 0 200px; max-width: 300px;"></div> 62 <div data-expected-width="300" style="flex: 1 0 200px; -moz-flex: 1 0 200px; m ax-width: 300px;"></div>
63 <div data-expected-width="200" class="flex1-0-0"></div> 63 <div data-expected-width="200" class="flex1-0-0"></div>
64 </div> 64 </div>
65 65
66 <!-- Test min-width. --> 66 <!-- Test min-width. -->
67 <div class="flexbox"> 67 <div class="flexbox">
68 <div data-expected-width="350" style="-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px; min-width: 350px;"></div> 68 <div data-expected-width="350" style="flex: 1 1 400px; -moz-flex: 1 1 400px; m in-width: 350px;"></div>
69 <div data-expected-width="250" style="-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px"></div> 69 <div data-expected-width="250" style="flex: 1 1 400px; -moz-flex: 1 1 400px">< /div>
70 </div> 70 </div>
71 71
72 <!-- The flex items can overflow the flexbox. --> 72 <!-- The flex items can overflow the flexbox. -->
73 <div class="flexbox"> 73 <div class="flexbox">
74 <div data-expected-width="350" style="-webkit-flex: 1 1 400px; -moz-flex: 1 1 400px; min-width: 350px;"></div> 74 <div data-expected-width="350" style="flex: 1 1 400px; -moz-flex: 1 1 400px; m in-width: 350px;"></div>
75 <div data-expected-width="300" style="-webkit-flex: 2 0 300px; -moz-flex: 2 0 300px; max-width: 300px;"></div> 75 <div data-expected-width="300" style="flex: 2 0 300px; -moz-flex: 2 0 300px; m ax-width: 300px;"></div>
76 <div data-expected-width="0" class="flex1-0-0"></div> 76 <div data-expected-width="0" class="flex1-0-0"></div>
77 </div> 77 </div>
78 78
79 <div class="flexbox"> 79 <div class="flexbox">
80 <div data-expected-width="100" data-offset-x="0" class="flex1-0-0" style="marg in: 0 auto; max-width: 100px;"></div> 80 <div data-expected-width="100" data-offset-x="0" class="flex1-0-0" style="marg in: 0 auto; max-width: 100px;"></div>
81 <div data-expected-width="333" data-offset-x="100" style="-webkit-flex: 2 0 0; -moz-flex: 2 0 0"></div> 81 <div data-expected-width="333" data-offset-x="100" style="flex: 2 0 0; -moz-fl ex: 2 0 0"></div>
82 <div data-expected-width="167" data-offset-x="433" class="flex1-0-0"></div> 82 <div data-expected-width="167" data-offset-x="433" class="flex1-0-0"></div>
83 </div> 83 </div>
84 84
85 <!-- min-width and max-width take priority over the preferred size. --> 85 <!-- min-width and max-width take priority over the preferred size. -->
86 <div class="flexbox"> 86 <div class="flexbox">
87 <div data-expected-width="500" class="flex1-0-0" style="min-width: 300px"></di v> 87 <div data-expected-width="500" class="flex1-0-0" style="min-width: 300px"></di v>
88 <div data-expected-width="100" style="-webkit-flex: 1 0 50%; -moz-flex: 1 0 50 %; max-width: 100px"></div> 88 <div data-expected-width="100" style="flex: 1 0 50%; -moz-flex: 1 0 50%; max-w idth: 100px"></div>
89 </div> 89 </div>
90 90
91 <div class="flexbox" style="width: 200px"> 91 <div class="flexbox" style="width: 200px">
92 <div data-expected-width="150" class="flex1" style="min-width: 150px"></div> 92 <div data-expected-width="150" class="flex1" style="min-width: 150px"></div>
93 <div data-expected-width="50" class="flex1" style="max-width: 90px"></div> 93 <div data-expected-width="50" class="flex1" style="max-width: 90px"></div>
94 </div> 94 </div>
95 95
96 <div class="flexbox" style="width: 200px"> 96 <div class="flexbox" style="width: 200px">
97 <div data-expected-width="150" class="flex1" style="min-width: 120px"></div> 97 <div data-expected-width="150" class="flex1" style="min-width: 120px"></div>
98 <div data-expected-width="50" class="flex1" style="max-width: 50px"></div> 98 <div data-expected-width="50" class="flex1" style="max-width: 50px"></div>
99 </div> 99 </div>
100 100
101 <div class="flexbox" style="width: 200px"> 101 <div class="flexbox" style="width: 200px">
102 <div data-expected-width="100" class="flex1" style="min-width: 100px"></div> 102 <div data-expected-width="100" class="flex1" style="min-width: 100px"></div>
103 <div data-expected-width="100" class="flex3"></div> 103 <div data-expected-width="100" class="flex3"></div>
104 </div> 104 </div>
105 105
106 <div class="flexbox" style="width: 200px"> 106 <div class="flexbox" style="width: 200px">
107 <div data-expected-width="150" style="-webkit-flex: 1 50px; -moz-flex: 1 50px; min-width: 100px"></div> 107 <div data-expected-width="150" style="flex: 1 50px; -moz-flex: 1 50px; min-wid th: 100px"></div>
108 <div data-expected-width="50" style="-webkit-flex: 1 100px; -moz-flex: 1 100px ; max-width: 50px"></div> 108 <div data-expected-width="50" style="flex: 1 100px; -moz-flex: 1 100px; max-wi dth: 50px"></div>
109 </div> 109 </div>
110 110
111 <div class="flexbox"> 111 <div class="flexbox">
112 <div data-expected-width="80" class="flex1"></div> 112 <div data-expected-width="80" class="flex1"></div>
113 <div data-expected-width="160" class="flex2"></div> 113 <div data-expected-width="160" class="flex2"></div>
114 <div data-expected-width="360" class="flex1" style="min-width: 360px"></div> 114 <div data-expected-width="360" class="flex1" style="min-width: 360px"></div>
115 </div> 115 </div>
116 116
117 </body> 117 </body>
118 </html> 118 </html>
OLDNEW
« LayoutTests/css3/flexbox/anonymous-block-merge-crash.html ('K') | « LayoutTests/css3/flexbox/flex-algorithm.html ('k') | LayoutTests/css3/flexbox/flex-algorithm-with-margins.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698