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 .flexbox { | 5 .flexbox { |
6 border: 2px solid orange; | 6 border: 2px solid orange; |
7 } | 7 } |
8 .h3 { | 8 .h3 { |
9 height: 300px; | 9 height: 300px; |
10 } | 10 } |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
73 <div data-offset-x=3></div><div data-offset-x=103></div><div data-offset-x=2
03></div> | 73 <div data-offset-x=3></div><div data-offset-x=103></div><div data-offset-x=2
03></div> |
74 </div> | 74 </div> |
75 | 75 |
76 <h3>flex-box has box-sizing: default and flex-wrap: wrap;</h3> | 76 <h3>flex-box has box-sizing: default and flex-wrap: wrap;</h3> |
77 <div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3p
x; height: 200px; width: 100px; position: relative" data-expected-width=110 data
-expected-height=210> | 77 <div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3p
x; height: 200px; width: 100px; position: relative" data-expected-width=110 data
-expected-height=210> |
78 <div data-offset-x=3></div><div data-offset-x=3></div><div data-offset-x=103
></div> | 78 <div data-offset-x=3></div><div data-offset-x=3></div><div data-offset-x=103
></div> |
79 </div> | 79 </div> |
80 | 80 |
81 <h3>flex-flow: column, flex-box has box-sizing: border-box, flex items have flex
: 1</h3> | 81 <h3>flex-flow: column, flex-box has box-sizing: border-box, flex items have flex
: 1</h3> |
82 <div class="flexbox column" style="box-sizing: border-box; border: 2px solid lig
htblue; padding: 3px; height: 343px; width: 100px;" data-expected-width=100 data
-expected-height=343> | 82 <div class="flexbox column" style="box-sizing: border-box; border: 2px solid lig
htblue; padding: 3px; height: 343px; width: 100px;" data-expected-width=100 data
-expected-height=343> |
83 <div style="-webkit-flex: 1; -moz-flex: 1" data-expected-height=111></div> | 83 <div style="flex: 1; -moz-flex: 1" data-expected-height=111></div> |
84 <div style="-webkit-flex: 1; -moz-flex: 1" data-expected-height=111></div> | 84 <div style="flex: 1; -moz-flex: 1" data-expected-height=111></div> |
85 <div style="-webkit-flex: 1; -moz-flex: 1" data-expected-height=111></div> | 85 <div style="flex: 1; -moz-flex: 1" data-expected-height=111></div> |
86 </div> | 86 </div> |
87 | 87 |
88 <script> | 88 <script> |
89 function addExpectedSizes(flexItem) { | 89 function addExpectedSizes(flexItem) { |
90 if (!flexItem.hasAttribute('data-expected-height')) | 90 if (!flexItem.hasAttribute('data-expected-height')) |
91 flexItem.setAttribute('data-expected-height', 100); | 91 flexItem.setAttribute('data-expected-height', 100); |
92 if (!flexItem.hasAttribute('data-expected-width')) | 92 if (!flexItem.hasAttribute('data-expected-width')) |
93 flexItem.setAttribute('data-expected-width', 100); | 93 flexItem.setAttribute('data-expected-width', 100); |
94 } | 94 } |
95 [].forEach.call(document.querySelectorAll(".flexbox > div"), addExpectedSize
s); | 95 [].forEach.call(document.querySelectorAll(".flexbox > div"), addExpectedSize
s); |
96 [].forEach.call(document.querySelectorAll(".border-box"), addExpectedSizes); | 96 [].forEach.call(document.querySelectorAll(".border-box"), addExpectedSizes); |
97 </script> | 97 </script> |
98 </body> | 98 </body> |
99 </html> | 99 </html> |
OLD | NEW |