diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html new file mode 100644 index 0000000000..4d0306205e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic change to the inline-size of a block 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=1731653"> +<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 block container's inline-size triggers the reflow of its children"> + +<style> +#block { + inline-size: 100px; + block-size: 100px; + font: 50px/1 Ahem; + color: green; + word-break: break-all; +} + +#block > div { + /* The following inline-size and padding will give the div a border-box + inline-size of 100px, both before and after this test's dynamic + modification. */ + inline-size: 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="block"> + <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 block's inline-size to trigger incremental reflow. */ +document.getElementById("block").style.inlineSize = "200px"; +</script> |