OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | |
2 <link href="resources/flexbox.css" rel="stylesheet"> | 3 <link href="resources/flexbox.css" rel="stylesheet"> |
3 <script src="../../resources/testharness.js"></script> | 4 <script src="../../resources/testharness.js"></script> |
4 <script src="../../resources/testharnessreport.js"></script> | 5 <script src="../../resources/testharnessreport.js"></script> |
5 <script src="../../resources/check-layout-th.js"></script> | 6 <script src="../../resources/check-layout-th.js"></script> |
6 <body onload="checkLayout('.flexbox')"> | 7 <style> |
7 <div id=log></div> | 8 .height-100pct { |
9 height: 100%; | |
10 } | |
8 | 11 |
9 <!-- This isn't "correct" per the spec, but it is an interim fix | 12 #container { |
10 to avoid bad results. | 13 height: 300px; |
11 See https://crbug.com/580196 | 14 outline: 2px solid black; |
12 --> | 15 } |
13 <div class="flexbox column" style="height: 0px;" data-expected-height="0"> | 16 |
14 <div data-expected-height="0" style="display: flex;">Some text</div> | 17 .inner |
18 { | |
19 width: 400px; | |
20 flex: 1; | |
21 background-color: green; | |
22 } | |
23 </style> | |
24 <script> | |
25 function change() { | |
26 var container = document.getElementById('container'); | |
27 container.offsetHeight; | |
28 container.style.height='100px'; | |
29 checkLayout('#container'); | |
30 } | |
31 </script> | |
32 <body onload="change()"> | |
33 <p>Green rectangle should be entirely within the black rectangle</p> | |
34 <div id="log"></div> | |
35 <div id="container"> | |
36 <div class="flexbox column height-100pct"> | |
eae
2016/07/18 22:14:07
style="height: 100%;" instead of trying to encode
cbiesinger
2016/07/18 22:17:09
Done.
| |
37 <div class="flexbox flex-one"> | |
38 <div class="flexbox column"> | |
39 <div class="flexbox column flex-one"> | |
40 <div class="inner" data-expected-height="100"> | |
eae
2016/07/18 22:14:07
You might want to use a different number than 100
cbiesinger
2016/07/18 22:17:09
Done.
| |
41 </div> | |
42 </div> | |
43 </div> | |
44 </div> | |
45 </div> | |
15 </div> | 46 </div> |
OLD | NEW |