OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link rel="stylesheet" href="resources/flexbox.css"> | 4 <link rel="stylesheet" href="resources/flexbox.css"> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <style> | 6 <style> |
7 .flexbox { | 7 .flexbox { |
8 width: 600px; | 8 width: 600px; |
9 background-color: grey; | 9 background-color: grey; |
10 border: 5px solid black; | 10 border: 5px solid black; |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
65 </div> | 65 </div> |
66 | 66 |
67 <div class="flexbox wrap"> | 67 <div class="flexbox wrap"> |
68 <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expect
ed-width="490" data-offset-x="10" data-offset-y="0"></div> | 68 <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expect
ed-width="490" data-offset-x="10" data-offset-y="0"></div> |
69 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> | 69 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> |
70 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> | 70 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> |
71 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="100" data-offset-y="10"></div> | 71 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="100" data-offset-y="10"></div> |
72 </div> | 72 </div> |
73 | 73 |
74 <div class="flexbox wrap"> | 74 <div class="flexbox wrap"> |
75 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px;" data-
expected-width="300" data-offset-x="0" data-offset-y="0"></div> | 75 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px;" data-expected
-width="300" data-offset-x="0" data-offset-y="0"></div> |
76 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="300" data-offset-y="0"></div> | 76 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="300" data-offset-y="0"></div> |
77 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="400" data-offset-y="0"></div> | 77 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="400" data-offset-y="0"></div> |
78 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="500" data-offset-y="0"></div> | 78 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="500" data-offset-y="0"></div> |
79 </div> | 79 </div> |
80 | 80 |
81 <div class="flexbox wrap"> | 81 <div class="flexbox wrap"> |
82 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; paddin
g-left: 10px;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></d
iv> | 82 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left:
10px;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></div> |
83 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> | 83 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> |
84 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> | 84 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> |
85 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> | 85 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> |
86 </div> | 86 </div> |
87 | 87 |
88 <div class="flexbox wrap"> | 88 <div class="flexbox wrap"> |
89 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border
-left: 10px solid red;" data-expected-width="310" data-offset-x="0" data-offset-
y="0"></div> | 89 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 1
0px solid red;" data-expected-width="310" data-offset-x="0" data-offset-y="0"></
div> |
90 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> | 90 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> |
91 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> | 91 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> |
92 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> | 92 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> |
93 </div> | 93 </div> |
94 | 94 |
95 <div class="flexbox wrap"> | 95 <div class="flexbox wrap"> |
96 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin
-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></d
iv> | 96 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 1
0px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div> |
97 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> | 97 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> |
98 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> | 98 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> |
99 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> | 99 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> |
100 </div> | 100 </div> |
101 | 101 |
102 <div class="flexbox wrap children-border-box"> | 102 <div class="flexbox wrap children-border-box"> |
103 <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expec
ted-width="400" data-offset-x="0" data-offset-y="0"></div> | 103 <div class="flex-one" style="min-width: 400px; padding-left: 10px;" data-expec
ted-width="400" data-offset-x="0" data-offset-y="0"></div> |
104 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="400" data-offset-y="0"></div> | 104 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="400" data-offset-y="0"></div> |
105 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> | 105 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> |
106 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> | 106 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> |
107 </div> | 107 </div> |
108 | 108 |
109 <div class="flexbox wrap children-border-box"> | 109 <div class="flexbox wrap children-border-box"> |
110 <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" d
ata-expected-width="400" data-offset-x="0" data-offset-y="0"></div> | 110 <div class="flex-one" style="min-width: 400px; border-left: 10px solid red;" d
ata-expected-width="400" data-offset-x="0" data-offset-y="0"></div> |
111 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="400" data-offset-y="0"></div> | 111 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="400" data-offset-y="0"></div> |
112 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> | 112 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> |
113 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> | 113 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> |
114 </div> | 114 </div> |
115 | 115 |
116 <div class="flexbox wrap children-border-box"> | 116 <div class="flexbox wrap children-border-box"> |
117 <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expect
ed-width="490" data-offset-x="10" data-offset-y="0"></div> | 117 <div class="flex-one" style="min-width: 400px; margin-left: 10px;" data-expect
ed-width="490" data-offset-x="10" data-offset-y="0"></div> |
118 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> | 118 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="500" data-offset-y="0"></div> |
119 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> | 119 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="0" data-offset-y="10"></div> |
120 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="100" data-offset-y="10"></div> | 120 <div class="flex-none" style="width: 100px" data-expected-width="100" data-off
set-x="100" data-offset-y="10"></div> |
121 </div> | 121 </div> |
122 | 122 |
123 <div class="flexbox wrap children-border-box"> | 123 <div class="flexbox wrap children-border-box"> |
124 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; paddin
g-left: 10px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></d
iv> | 124 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; padding-left:
10px;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></div> |
125 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="300" data-offset-y="0"></div> | 125 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="300" data-offset-y="0"></div> |
126 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="400" data-offset-y="0"></div> | 126 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="400" data-offset-y="0"></div> |
127 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="500" data-offset-y="0"></div> | 127 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="500" data-offset-y="0"></div> |
128 </div> | 128 </div> |
129 | 129 |
130 <div class="flexbox wrap children-border-box"> | 130 <div class="flexbox wrap children-border-box"> |
131 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border
-left: 10px solid red;" data-expected-width="300" data-offset-x="0" data-offset-
y="0"></div> | 131 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; border-left: 1
0px solid red;" data-expected-width="300" data-offset-x="0" data-offset-y="0"></
div> |
132 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="300" data-offset-y="0"></div> | 132 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="300" data-offset-y="0"></div> |
133 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="400" data-offset-y="0"></div> | 133 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="400" data-offset-y="0"></div> |
134 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="500" data-offset-y="0"></div> | 134 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="100"
data-offset-x="500" data-offset-y="0"></div> |
135 </div> | 135 </div> |
136 | 136 |
137 <div class="flexbox wrap children-border-box"> | 137 <div class="flexbox wrap children-border-box"> |
138 <div style="-webkit-flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin
-left: 10px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></d
iv> | 138 <div style="flex: 1 1 600px; flex: 1 1 600px; max-width: 300px; margin-left: 1
0px;" data-expected-width="300" data-offset-x="10" data-offset-y="0"></div> |
139 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> | 139 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="310" data-offset-y="0"></div> |
140 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> | 140 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="145"
data-offset-x="455" data-offset-y="0"></div> |
141 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> | 141 <div class="flex-one-one-auto" style="width: 100px" data-expected-width="600"
data-offset-x="0" data-offset-y="10"></div> |
142 </div> | 142 </div> |
143 | 143 |
144 </body> | 144 </body> |
145 </html> | 145 </html> |
OLD | NEW |