| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 position: relative; | 5 position: relative; |
| 6 background-color: pink; | 6 background-color: pink; |
| 7 outline: 1px solid black; | 7 outline: 1px solid black; |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 } | 9 } |
| 10 .flexbox { | 10 .flexbox { |
| 11 display: -webkit-flex; | 11 display: flex; |
| 12 background-color: grey; | 12 background-color: grey; |
| 13 margin: 10px 20px 30px 40px; | 13 margin: 10px 20px 30px 40px; |
| 14 } | 14 } |
| 15 .title { | 15 .title { |
| 16 margin-top: 1em; | 16 margin-top: 1em; |
| 17 } | 17 } |
| 18 .ltr { | 18 .ltr { |
| 19 direction: ltr; | 19 direction: ltr; |
| 20 } | 20 } |
| 21 .rtl { | 21 .rtl { |
| 22 direction: rtl; | 22 direction: rtl; |
| 23 } | 23 } |
| 24 .horizontal-tb { | 24 .horizontal-tb { |
| 25 -webkit-writing-mode: horizontal-tb; | 25 -webkit-writing-mode: horizontal-tb; |
| 26 } | 26 } |
| 27 .horizontal-bt { | 27 .horizontal-bt { |
| 28 -webkit-writing-mode: horizontal-bt; | 28 -webkit-writing-mode: horizontal-bt; |
| 29 } | 29 } |
| 30 .vertical-rl { | 30 .vertical-rl { |
| 31 -webkit-writing-mode: vertical-rl; | 31 -webkit-writing-mode: vertical-rl; |
| 32 } | 32 } |
| 33 .vertical-lr { | 33 .vertical-lr { |
| 34 -webkit-writing-mode: vertical-lr; | 34 -webkit-writing-mode: vertical-lr; |
| 35 } | 35 } |
| 36 .row { | 36 .row { |
| 37 -webkit-flex-flow: row; | 37 flex-flow: row; |
| 38 } | 38 } |
| 39 .row-reverse { | 39 .row-reverse { |
| 40 -webkit-flex-flow: row-reverse; | 40 flex-flow: row-reverse; |
| 41 } | 41 } |
| 42 .column { | 42 .column { |
| 43 -webkit-flex-flow: column; | 43 flex-flow: column; |
| 44 } | 44 } |
| 45 .column-reverse { | 45 .column-reverse { |
| 46 -webkit-flex-flow: column-reverse; | 46 flex-flow: column-reverse; |
| 47 } | 47 } |
| 48 .flexbox > div { | 48 .flexbox > div { |
| 49 margin: 13px 2px 17px 8px; | 49 margin: 13px 2px 17px 8px; |
| 50 background-color: blue; | 50 background-color: blue; |
| 51 } | 51 } |
| 52 </style> | 52 </style> |
| 53 <script src="../../resources/check-layout.js"></script> | 53 <script src="../../resources/check-layout.js"></script> |
| 54 <body onload="checkLayout('.flexbox')"> | 54 <body onload="checkLayout('.flexbox')"> |
| 55 | 55 |
| 56 <script> | 56 <script> |
| (...skipping 15 matching lines...) Expand all Loading... |
| 72 | 72 |
| 73 var flexboxExpectations = 'data-offset-x="40" data-offset-y="10"'; | 73 var flexboxExpectations = 'data-offset-x="40" data-offset-y="10"'; |
| 74 var flexItemExpectations = 'data-expected-width="20" data-expected-h
eight="20" data-offset-x="48" data-offset-y="23"'; | 74 var flexItemExpectations = 'data-expected-width="20" data-expected-h
eight="20" data-offset-x="48" data-offset-y="23"'; |
| 75 | 75 |
| 76 var container = document.createElement('div'); | 76 var container = document.createElement('div'); |
| 77 container.className = 'container'; | 77 container.className = 'container'; |
| 78 container.setAttribute('data-expected-width', 90); | 78 container.setAttribute('data-expected-width', 90); |
| 79 container.setAttribute('data-expected-height', 90); | 79 container.setAttribute('data-expected-height', 90); |
| 80 | 80 |
| 81 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '"
' + flexboxExpectations + '>\n' + | 81 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '"
' + flexboxExpectations + '>\n' + |
| 82 '<div style="-webkit-flex: 1 auto; width: 20px; height: 20px;" '
+ flexItemExpectations + '></div>\n' + | 82 '<div style="flex: 1 auto; width: 20px; height: 20px;" ' + flexI
temExpectations + '></div>\n' + |
| 83 '</div>'; | 83 '</div>'; |
| 84 | 84 |
| 85 document.body.appendChild(container); | 85 document.body.appendChild(container); |
| 86 }) | 86 }) |
| 87 }) | 87 }) |
| 88 }) | 88 }) |
| 89 </script> | 89 </script> |
| 90 </body> | 90 </body> |
| 91 </html> | 91 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
