diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html new file mode 100644 index 0000000000..1627e32d96 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/dynamic-isize-change-004.html @@ -0,0 +1,42 @@ +<!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="stylesheet" href="/fonts/ahem.css"> +<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: 100px; + block-size: 100px; + font: 50px/1 Ahem; + color: green; + word-break: break-all; +} + +#flexbox > div { + /* The following flex-basis and padding will give our flex item a border-box + inline-size of 100px, both before and after this test's dynamic + modification. */ + flex-basis: 50%; + padding-right: calc(100px - 50%); + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="flexbox"> + <div>XXXX</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 = "200px"; +</script> |