forked from mirrors/gecko-dev
143fe07a33
Currently, we assume any flex item with percentage padding will be marked as dirty if the percentage basis is changed. However, it is not true. To fix it, we cache the flex item's border and padding used in its most recent final reflow to detect their changes. dynamic-isize-change-004.html is designed to catch the concern in bug 1700580 comment 12. Differential Revision: https://phabricator.services.mozilla.com/D125620
40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<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;
|
|
inline-size: 50px;
|
|
block-size: 100px;
|
|
background: red;
|
|
}
|
|
|
|
#flexbox > div {
|
|
box-sizing: border-box;
|
|
|
|
/* The following flex-basis and padding will give our flex item a content-box
|
|
inline-size of 25px, both before and after this test's dynamic change. */
|
|
flex-basis: 100%;
|
|
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>
|