OLD | NEW |
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 background-color: #aaa; | 9 background-color: #aaa; |
10 position: relative; | 10 position: relative; |
(...skipping 24 matching lines...) Expand all Loading... |
35 <div class="flexbox" style="width: 600px"> | 35 <div class="flexbox" style="width: 600px"> |
36 <div data-expected-height="100" class="flex-one" style="position: relative"> | 36 <div data-expected-height="100" class="flex-one" style="position: relative"> |
37 <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"
></div> | 37 <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"
></div> |
38 </div> | 38 </div> |
39 <div data-expected-height="100" class="flex-one" style="height: 100px"></div> | 39 <div data-expected-height="100" class="flex-one" style="height: 100px"></div> |
40 <div data-expected-height="100" class="flex-one" style="position: relative"> | 40 <div data-expected-height="100" class="flex-one" style="position: relative"> |
41 <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"
></div> | 41 <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"
></div> |
42 </div> | 42 </div> |
43 </div> | 43 </div> |
44 | 44 |
45 <div style="-webkit-writing-mode: horizontal-bt"> | |
46 <div class="flexbox" style="width: 600px"> | |
47 <div data-expected-height="100" class="flex-one" style="position: relative"> | |
48 <div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></d
iv> | |
49 </div> | |
50 <div data-expected-height="100" class="flex-one" style="height: 100px"></div> | |
51 <div data-expected-height="100" class="flex-one" style="position: relative"> | |
52 <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"
></div> | |
53 </div> | |
54 </div> | |
55 </div> | |
56 | |
57 <div style="-webkit-writing-mode: vertical-rl"> | 45 <div style="-webkit-writing-mode: vertical-rl"> |
58 <div class="flexbox" style="height: 200px"> | 46 <div class="flexbox" style="height: 200px"> |
59 <div data-expected-width="100" class="flex-one" style="position: relative"> | 47 <div data-expected-width="100" class="flex-one" style="position: relative"> |
60 <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></
div> | 48 <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></
div> |
61 </div> | 49 </div> |
62 <div data-expected-width="100" class="flex-one" style="width: 100px"></div> | 50 <div data-expected-width="100" class="flex-one" style="width: 100px"></div> |
63 <div data-expected-width="100" class="flex-one" style="position: relative"> | 51 <div data-expected-width="100" class="flex-one" style="position: relative"> |
64 <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></
div> | 52 <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></
div> |
65 </div> | 53 </div> |
66 </div> | 54 </div> |
(...skipping 17 matching lines...) Expand all Loading... |
84 </div> | 72 </div> |
85 </div> | 73 </div> |
86 | 74 |
87 <div class="flexbox column" style="width: 100px;"> | 75 <div class="flexbox column" style="width: 100px;"> |
88 <div data-expected-width="100" data-expected-height="50" style="background-col
or: yellow;"> | 76 <div data-expected-width="100" data-expected-height="50" style="background-col
or: yellow;"> |
89 <div data-expected-width="200" style="height: 50px; width: 200px; background
-color: orange"></div> | 77 <div data-expected-width="200" style="height: 50px; width: 200px; background
-color: orange"></div> |
90 </div> | 78 </div> |
91 </div> | 79 </div> |
92 | 80 |
93 </html> | 81 </html> |
OLD | NEW |