<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: Dynamic change to the inline-size of a column flexbox container</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:[email protected]">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
<style>
#flexbox {
display: flex;
flex-direction: column;
inline-size: 50px;
block-size: 100px;
background: red;
}
#flexbox > div {
box-sizing: border-box;
flex-basis: 100px;
/* The following padding will give our flex item a content-box inline-size of
25px, both before and after this test's dynamic change. (Note that the
horizontal axis is the flex container's cross axis, so the item stretches
its width by default to fill the available space.) */
padding-right: calc(100% - 25px);
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flexbox">
<div></div>
</div>
<script>
/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
document.documentElement.offsetHeight;
/* Change the flexbox's inline-size to trigger incremental reflow. */
document.getElementById("flexbox").style.inlineSize = "100px";
</script>
Codebase Browser
chromium