Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flexbox-min-height-auto-004.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
-->
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Testing min-height:auto & 'overflow' interaction</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<!--
This testcase checks how "overflow-x" indirectly impacts the sizing
behavior of flex items with "min-height:auto" (the new initial value
for "min-height"), via its influence on "overflow-y".
In particular, the flex-item-specific "min-height:auto" behavior is
supposed to be disabled (e.g. we end up with min-height:0) when
"overflow-y" is non-"visible". Moreover, when "overflow-x" is set to a
scrolling value, it forces "overflow-y" to compute to a scrolling value
as well, as described at
So, "overflow-x" has an indirect effect (via "overflow-y") here.
-->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.flexbox {
display: flex;
flex-direction: column;
height: 30px; /* Shrink flex items below min-height */
margin-right: 2px; /* (Just for spacing things out, visually) */
float: left;
}
.flexbox > * {
/* Flex items have purple border: */
border: 2px dotted purple;
}
.flexbox > * > * {
/* Flex items' contents are gray & fixed-size: */
background: gray;
width: 40px;
height: 80px;
}
.xvisible { overflow-x: visible; }
.xhidden { overflow-x: hidden; }
.xscroll { overflow-x: scroll; }
.xauto { overflow-x: auto; }
</style>
</head>
<body>
<!-- min-height:auto should prevent shrinking below intrinsic height when
the flex item has "overflow-x: visible", but not for any other
overflow-x values (because of overflow-x's influence on overflow-y).
-->
<div class="flexbox" id="visible"><div class="xvisible"><div></div></div></div>
<div class="flexbox" id="hidden"><div class="xhidden"><div></div></div></div>
<div class="flexbox" id="scroll"><div class="xscroll"><div></div></div></div>
<div class="flexbox" id="auto"><div class="xauto"><div></div></div></div>
<script>
function verticalScrollbarWidth() {
const probe = document.createElement("div");
probe.style.cssText =
"position:absolute;visibility:hidden;width:100px;height:100px;overflow-y:scroll;";
document.body.appendChild(probe);
const w = probe.offsetWidth - probe.clientWidth;
probe.remove();
return w;
}
const SCROLLBAR = verticalScrollbarWidth();
// Flex item border-box height: 80px content + 2*2px border = 84px.
const INTRINSIC_HEIGHT = 84;
// Shrunk to fit the 30px container.
const SHRUNK_HEIGHT = 30;
// Flex item border-box width without scrollbar gutter:
// 40px content + 2*2px border = 44px.
const BASE_WIDTH = 44;
test(() => {
const item = document.querySelector("#visible > *");
assert_equals(item.offsetHeight, INTRINSIC_HEIGHT, "offsetHeight");
assert_equals(item.offsetWidth, BASE_WIDTH, "offsetWidth");
}, "overflow-x:visible: overflow-y stays visible; min-height:auto holds; no scrollbar gutter");
test(() => {
const item = document.querySelector("#hidden > *");
assert_equals(item.offsetHeight, SHRUNK_HEIGHT, "offsetHeight");
assert_equals(item.offsetWidth, BASE_WIDTH + SCROLLBAR, "offsetWidth");
assert_equals(item.scrollWidth, item.clientWidth, "no horizontal overflow");
}, "overflow-x:hidden: forces overflow-y to auto; min-height:auto resolves to 0; width includes scrollbar gutter");
test(() => {
const item = document.querySelector("#scroll > *");
assert_equals(item.offsetHeight, SHRUNK_HEIGHT, "offsetHeight");
assert_equals(item.offsetWidth, BASE_WIDTH + SCROLLBAR, "offsetWidth");
assert_equals(item.scrollWidth, item.clientWidth, "no horizontal overflow");
}, "overflow-x:scroll: forces overflow-y to auto; min-height:auto resolves to 0; width includes scrollbar gutter");
test(() => {
const item = document.querySelector("#auto > *");
assert_equals(item.offsetHeight, SHRUNK_HEIGHT, "offsetHeight");
assert_equals(item.offsetWidth, BASE_WIDTH + SCROLLBAR, "offsetWidth");
assert_equals(item.scrollWidth, item.clientWidth, "no horizontal overflow");
}, "overflow-x:auto: forces overflow-y to auto; min-height:auto resolves to 0; width includes scrollbar gutter");
</script>
</body>
</html>