| 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 .container { | 5 .container { |
| 6 position: relative; | 6 position: relative; |
| 7 background-color: pink; | 7 background-color: pink; |
| 8 outline: 1px solid black; | 8 outline: 1px solid black; |
| 9 display: inline-block; | 9 display: inline-block; |
| 10 } | 10 } |
| 11 .flexbox { | 11 .flexbox { |
| 12 background-color: grey; | 12 background-color: grey; |
| 13 width: 100px; | 13 width: 100px; |
| 14 height: 100px; | 14 height: 100px; |
| 15 margin: 20px; | 15 margin: 20px; |
| 16 } | 16 } |
| 17 .flexbox > * { | 17 .flexbox > * { |
| 18 -webkit-flex: none; | 18 flex: none; |
| 19 -moz-flex: none; | 19 -moz-flex: none; |
| 20 } | 20 } |
| 21 .flexbox > :nth-child(1) { | 21 .flexbox > :nth-child(1) { |
| 22 background-color: blue; | 22 background-color: blue; |
| 23 margin: auto; | 23 margin: auto; |
| 24 } | 24 } |
| 25 </style> | 25 </style> |
| 26 <script src="../../resources/check-layout.js"></script> | 26 <script src="../../resources/check-layout.js"></script> |
| 27 <body onload="checkLayout('.flexbox')"> | 27 <body onload="checkLayout('.flexbox')"> |
| 28 | 28 |
| (...skipping 15 matching lines...) Expand all Loading... |
| 44 </div> | 44 </div> |
| 45 </div> | 45 </div> |
| 46 | 46 |
| 47 <div class="container"> | 47 <div class="container"> |
| 48 <div class="flexbox column-reverse"> | 48 <div class="flexbox column-reverse"> |
| 49 <div data-offset-x=20 data-offset-y=60 style="width: 120px; height: 20px"></
div> | 49 <div data-offset-x=20 data-offset-y=60 style="width: 120px; height: 20px"></
div> |
| 50 </div> | 50 </div> |
| 51 </div> | 51 </div> |
| 52 </body> | 52 </body> |
| 53 </html> | 53 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
