Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/dynamic-isize-change-003.html - WPT Dashboard Interop Dashboard
<!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:tlin@mozilla.com">
<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>