Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: cd5bb894656e15405f1ab638cda9b24608e19f86 authored by Geoffrey Sneddon on 30 April 2018, 13:10:40 UTC
fixup! Fix #2669: Add alternate_hosts
Tip revision: cd5bb89
percentage-heights-003.html 
<!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: red;
    flex-grow: 1;
}

span {
    height: 100%;
    background: green;
    display: block;
}
</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>

<p>You should see no red</p>

<!-- This wrapper div is solely here to setup the max height so it can be computed consistently since body at 100% won't be consistent across devices  -->
<div style="height: 100px;">

    <div class="flexbox column">
        <div>
            <span data-expected-height="100"></span>
        </div>
    </div>
</div>
<div style="height: 100px;">
    <div class="flexbox column-wrap">
       <div>
            <span data-expected-height="50"></span>
        </div>
        <div>
            <span data-expected-height="50"></span>
        </div>
    </div>
</div>

</body>
</html>
back to top