| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/flexbox.css" rel="stylesheet"> | 4 <link href="resources/flexbox.css" rel="stylesheet"> |
| 5 <style> | 5 <style> |
| 6 body { | 6 body { |
| 7 margin: 0; | 7 margin: 0; |
| 8 } | 8 } |
| 9 | 9 |
| 10 .flexbox { | 10 .flexbox { |
| 11 background-color: red; | 11 background-color: red; |
| 12 } | 12 } |
| 13 | 13 |
| 14 .vertical-rl { | 14 .vertical-rl { |
| 15 -webkit-writing-mode: vertical-rl; | 15 -webkit-writing-mode: vertical-rl; |
| 16 } | 16 } |
| 17 | 17 |
| 18 .vertical-lr { | 18 .vertical-lr { |
| 19 -webkit-writing-mode: vertical-lr; | 19 -webkit-writing-mode: vertical-lr; |
| 20 } | 20 } |
| 21 | 21 |
| 22 .column > div { | 22 .column > div { |
| 23 -webkit-flex: none; | |
| 24 flex: none; | 23 flex: none; |
| 25 background-color: green; | 24 background-color: green; |
| 26 width: 100px; | 25 width: 100px; |
| 27 height: 10px; | 26 height: 10px; |
| 28 } | 27 } |
| 29 | 28 |
| 30 .row > div { | 29 .row > div { |
| 31 background-color: green; | 30 background-color: green; |
| 32 -webkit-flex: 1; | |
| 33 flex: 1; | 31 flex: 1; |
| 34 height: 50px; | 32 height: 50px; |
| 35 min-height: 0; | 33 min-height: 0; |
| 36 } | 34 } |
| 37 | 35 |
| 38 .vertical-lr > .column > div { | 36 .vertical-lr > .column > div { |
| 39 -webkit-flex: none; | |
| 40 flex: none; | 37 flex: none; |
| 41 height: 50px; | 38 height: 50px; |
| 42 width: 20px; | 39 width: 20px; |
| 43 } | 40 } |
| 44 | 41 |
| 45 .vertical-lr > .row > div { | 42 .vertical-lr > .row > div { |
| 46 -webkit-flex: 1; | |
| 47 flex: 1; | 43 flex: 1; |
| 48 width: 100px; | 44 width: 100px; |
| 49 } | 45 } |
| 50 | 46 |
| 51 </style> | 47 </style> |
| 52 </head> | 48 </head> |
| 53 <body> | 49 <body> |
| 54 | 50 |
| 55 This test passes if no red is showing. | 51 This test passes if no red is showing. |
| 56 | 52 |
| (...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 135 <div class="align-self-stretch"></div> | 131 <div class="align-self-stretch"></div> |
| 136 </div> | 132 </div> |
| 137 </div> | 133 </div> |
| 138 | 134 |
| 139 </div> | 135 </div> |
| 140 <!-- FIXME: Add tests for horizontal-bt and vertical-rl. Setting the logical | 136 <!-- FIXME: Add tests for horizontal-bt and vertical-rl. Setting the logical |
| 141 bottom border on these tests cause additional scrollbars to appear. --> | 137 bottom border on these tests cause additional scrollbars to appear. --> |
| 142 | 138 |
| 143 </body> | 139 </body> |
| 144 </html> | 140 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
