forked from mirrors/gecko-dev
5f9f01a4b7
Automatic update from web-platform-tests [css-flexbox] Migrate column-flex-child-with-overflow-scroll.html to WPT This CL moves css3/flexbox/column-flex-child-with-overflow-scroll.html to WPT directory. The test itself ensures the 'height' of flex children with 'overflow: scroll' do not shrink (commonly by the size of the scrollbar height). Original CL: https://codereview.chromium.org/417153003 BUG=1063749 R=dgrogan@chromium.org, robertma@chromium.org Change-Id: I30d1893d4d75125f68bb7b8daddb848597703ce6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2118631 Reviewed-by: David Grogan <dgrogan@chromium.org> Reviewed-by: Robert Ma <robertma@chromium.org> Commit-Queue: Antonio Gomes <tonikitoo@igalia.com> Cr-Commit-Position: refs/heads/master@{#753024} -- wpt-commits: 02f02cbb8031628c6352c52d202e1b77223b0cf1 wpt-pr: 22425
38 lines
1.2 KiB
HTML
38 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>Proper height of column flex children with overflow: scroll.</title>
|
|
<link href="support/flexbox.css" rel="stylesheet">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
|
<meta name="assert" content="This test ensures children of flexbox with flex-direction: column|column-reverse does not shrink their height after applying the overflow: scroll style."/>
|
|
<style>
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.scroll {
|
|
overflow: scroll;
|
|
}
|
|
|
|
.box {
|
|
width: 100px;
|
|
height: 75px;
|
|
padding: 5px;
|
|
border: 2px solid red;
|
|
}
|
|
</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>
|
|
<div class="flexbox column">
|
|
<div class="box" data-expected-width="100" data-expected-height="75"></div>
|
|
<div class="box scroll" id="box2" data-expected-width="100" data-expected-height="75"></div>
|
|
</div>
|
|
|
|
<div class="flexbox column-reverse">
|
|
<div class="box" data-expected-width="100" data-expected-height="75"></div>
|
|
<div class="box scroll" id="box4" data-expected-width="100" data-expected-height="75"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|