| 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 |