| <!DOCTYPE html> |
| <html> |
| <title>CSS Flexbox: Resolving relative height content within a flex container against flexed size</title> |
| <link rel="author" title="Microsoft" href="https://www.microsoft.com/" /> |
| <link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#definite-sizes" /> |
| <link rel="issue" href="https://github.com/w3c/csswg-drafts/issues/1679" /> |
| <meta name="assert" content="This test checks that percentage heights of content within a flex item are resolved against the flexed item" /> |
| |
| <style> |
| .flexbox { |
| display: flex; |
| min-height: 100%; |
| } |
| |
| .column { |
| flex-flow: column; |
| } |
| |
| .column-wrap { |
| flex-flow: column wrap; |
| } |
| |
| .flexbox > div { |
| background: teal; |
| flex-grow: 1; |
| } |
| |
| .flexbox span { |
| height: 100%; |
| background: orange; |
| display: block; |
| } |
| .vert-wm { |
| writing-mode: vertical-rl; |
| } |
| .horiz-wm { |
| writing-mode: horizontal-tb; |
| } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| <div id=log></div> |
| |
| <!-- The wrapper divs are here to give the flexbox something to fill --> |
| |
| <!-- definite unwrapped column flexbox --> |
| <div style="height: 100px;"> |
| <div class="flexbox column" style="height: 0"> |
| <div> |
| <span data-expected-height="100"></span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- definite wrapped column flexbox --> |
| <div style="height: 100px;"> |
| <div class="flexbox column-wrap" style="height: 0"> |
| <div> |
| <span data-expected-height="50"></span> |
| </div> |
| <div> |
| <span data-expected-height="50"></span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- indefinite unwrapped column flexbox --> |
| <div style="height: 100px;"> |
| <div class="flexbox column"> |
| <div> |
| <span data-expected-height="0"></span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- indefinite unwrapped column flexbox where item doesn't stretch --> |
| <div style="height: 100px;"> |
| <div class="flexbox column"> |
| <div style="align-self: flex-start"> |
| <span data-expected-height="0"></span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- indefinite wrapped column flexbox --> |
| <div style="height: 100px;"> |
| <div class="flexbox column-wrap"> |
| <div> |
| <span data-expected-height="0"></span> |
| </div> |
| <div> |
| <span data-expected-height="0"></span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- indefinite unwrapped column flexbox, with orthogonal-flow flex item. The |
| flex item's main size (height) is definite, since it's the item's inline |
| size, and inline sizes always end up definite. --> |
| <div style="height: 100px;"> |
| <div class="flexbox column"> |
| <div class="vert-wm"> |
| <span data-expected-height="100"></span> |
| </div> |
| </div> |
| </div> |
| |
| <!-- indefinite unwrapped row-oriented vertical-writing-mode flexbox, with |
| orthogonal-flow (horizontal-writing-mode) flex item. The flex item's |
| height (main size) is definite, since its parent flex container has a |
| definite main size, because the flex container's main axis is its |
| inline-axis and inline sizes are definite. --> |
| <div style="height: 100px;"> |
| <div class="flexbox vert-wm"> |
| <div class="horiz-wm"> |
| <span data-expected-height="100"></span> |
| </div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
