Chromium Code Reviews Chromium Code Reviews
Issue 237823002:
Properly shrink stretched flexbox children on relayout (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
|
ojan
2014/04/15 01:07:30
Nit: no need for the html, head and body elements.
| |
| 4 <style> | |
| 5 .flexbox { | |
| 6 display: flex; | |
| 7 background: papayawhip; | |
|
ojan
2014/04/15 01:07:30
papayawhip!
leviw_travelin_and_unemployed
2014/04/15 06:53:38
Right??
| |
| 8 border: 1px solid midnightblue; | |
| 9 margin: 1em; | |
| 10 width: 50px; | |
| 11 } | |
| 12 | |
| 13 .flexbox > div { | |
| 14 margin: 5px; | |
| 15 min-width: 10px; | |
| 16 min-height: 10px; | |
| 17 background-color: lawngreen; | |
| 18 } | |
| 19 | |
| 20 .column { | |
| 21 -webkit-flex-flow: column; | |
| 22 } | |
| 23 | |
| 24 .horizontal-tb { | |
| 25 -webkit-writing-mode: horizontal-tb; | |
| 26 } | |
| 27 .vertical-lr { | |
| 28 -webkit-writing-mode: vertical-lr; | |
| 29 } | |
| 30 | |
| 31 .largeitem { | |
| 32 height: 200px; | |
| 33 width: 200px; | |
| 34 margin: 5px; | |
| 35 } | |
| 36 </style> | |
| 37 </head> | |
| 38 <script src="../../resources/check-layout.js"></script> | |
| 39 <body onload="checkLayout('.flexbox')"> | |
| 40 | |
| 41 <div class="flexbox"> | |
| 42 <div data-expected-height=10 data-expected-width=10></div> | |
| 43 <div class="largeitem"></div> | |
| 44 </div> | |
| 45 <div class="flexbox column"> | |
| 46 <div data-expected-height=10 data-expected-width=40></div> | |
| 47 <div class="largeitem"></div> | |
| 48 </div> | |
| 49 | |
| 50 <div class="flexbox"> | |
| 51 <div class="horizontal-tb" data-expected-height=10 data-expected-width=10></di v> | |
| 52 <div class="largeitem"></div> | |
| 53 </div> | |
| 54 <div class="flexbox column"> | |
| 55 <div class="horizontal-tb" data-expected-height=10 data-expected-width=40></di v> | |
| 56 <div class="largeitem"></div> | |
| 57 </div> | |
| 58 | |
| 59 <div class="flexbox"> | |
| 60 <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div> | |
| 61 <div class="largeitem"></div> | |
| 62 </div> | |
| 63 <div class="flexbox column"> | |
| 64 <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div> | |
| 65 <div class="largeitem"></div> | |
| 66 </div> | |
| 67 <script> | |
| 68 document.body.offsetTop; | |
| 69 var targets = document.getElementsByClassName('largeitem'); | |
| 70 for (var i = targets.length - 1; i >= 0; i--) { | |
| 71 var target = targets[i]; | |
| 72 target.parentNode.removeChild(target); | |
|
ojan
2014/04/15 01:07:30
Nit: targets[i].remove();
| |
| 73 }; | |
| 74 </script> | |
| OLD | NEW |
