Chromium Code Reviews Chromium Code Reviews
Issue 237823002:
Properly shrink stretched flexbox children on relayout (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html |
| diff --git a/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html b/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..b058d75e47ae06170e75b1c534f077a92f588fed |
| --- /dev/null |
| +++ b/LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html |
| @@ -0,0 +1,74 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
|
ojan
2014/04/15 01:07:30
Nit: no need for the html, head and body elements.
|
| +<style> |
| +.flexbox { |
| + display: flex; |
| + background: papayawhip; |
|
ojan
2014/04/15 01:07:30
papayawhip!
leviw_travelin_and_unemployed
2014/04/15 06:53:38
Right??
|
| + border: 1px solid midnightblue; |
| + margin: 1em; |
| + width: 50px; |
| +} |
| + |
| +.flexbox > div { |
| + margin: 5px; |
| + min-width: 10px; |
| + min-height: 10px; |
| + background-color: lawngreen; |
| +} |
| + |
| +.column { |
| + -webkit-flex-flow: column; |
| +} |
| + |
| +.horizontal-tb { |
| + -webkit-writing-mode: horizontal-tb; |
| +} |
| +.vertical-lr { |
| + -webkit-writing-mode: vertical-lr; |
| +} |
| + |
| +.largeitem { |
| + height: 200px; |
| + width: 200px; |
| + margin: 5px; |
| +} |
| +</style> |
| +</head> |
| +<script src="../../resources/check-layout.js"></script> |
| +<body onload="checkLayout('.flexbox')"> |
| + |
| +<div class="flexbox"> |
| + <div data-expected-height=10 data-expected-width=10></div> |
| + <div class="largeitem"></div> |
| +</div> |
| +<div class="flexbox column"> |
| + <div data-expected-height=10 data-expected-width=40></div> |
| + <div class="largeitem"></div> |
| +</div> |
| + |
| +<div class="flexbox"> |
| + <div class="horizontal-tb" data-expected-height=10 data-expected-width=10></div> |
| + <div class="largeitem"></div> |
| +</div> |
| +<div class="flexbox column"> |
| + <div class="horizontal-tb" data-expected-height=10 data-expected-width=40></div> |
| + <div class="largeitem"></div> |
| +</div> |
| + |
| +<div class="flexbox"> |
| + <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div> |
| + <div class="largeitem"></div> |
| +</div> |
| +<div class="flexbox column"> |
| + <div class="vertical-lr" data-expected-height=10 data-expected-width=10></div> |
| + <div class="largeitem"></div> |
| +</div> |
| +<script> |
| +document.body.offsetTop; |
| +var targets = document.getElementsByClassName('largeitem'); |
| +for (var i = targets.length - 1; i >= 0; i--) { |
| + var target = targets[i]; |
| + target.parentNode.removeChild(target); |
|
ojan
2014/04/15 01:07:30
Nit: targets[i].remove();
|
| +}; |
| +</script> |
