diff options
Diffstat (limited to '')
-rw-r--r-- | testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html new file mode 100644 index 0000000000..e98de892d3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-percentage-block-size.html @@ -0,0 +1,64 @@ +<!doctype html> +<title>fieldset percentage block size</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + fieldset { block-size: 100px; margin: 20px; padding: 0; border: 10px solid; } + .rendered-legend { block-size: 80%; background: lime; padding: 0; } + .second-legend { block-size: 100%; background: yellow; padding: 0; } + fieldset > div { block-size: 100%; background: fuchsia; } +</style> +<div style="writing-mode: horizontal-tb"> + <fieldset> + <legend class="rendered-legend">rendered legend</legend> + <legend class="second-legend">second legend</legend> + <div>div</div> + </fieldset> +</div> + +<div style="writing-mode: vertical-lr"> + <fieldset> + <legend class="rendered-legend">rendered legend</legend> + <legend class="second-legend">second legend</legend> + <div>div</div> + </fieldset> +</div> + +<div style="writing-mode: vertical-rl"> + <fieldset> + <legend class="rendered-legend">rendered legend</legend> + <legend class="second-legend">second legend</legend> + <div>div</div> + </fieldset> +</div> + +<table cellspacing="0" cellpadding="0" style="width:100px; height:60px;"> + <tr> + <td> + <fieldset style="border:none; padding:0; height:100%; margin:0; margin-top:13px;"> + <div><div id="elm"></div></div> + </fieldset> + </td> + </tr> +</table> + +<script> + for (const div of document.querySelectorAll('div[style]')) { + for (const el of div.firstElementChild.children) { + test(() => { + const expected = el.textContent === 'rendered legend' ? '80px' : '30px'; + // 30px because: 100px - (max(0, legend-block-size - border-block-start)) + assert_equals(getComputedStyle(el).blockSize, expected); + }, `${el.textContent} (${div.getAttribute('style')})`); + } + } + +// crbug.com/1138204. Though the specification doesn't mention this behavior, +// there must be no doubt about the expected behavior. +test(() => { + const fieldset = document.querySelector('table fieldset'); + const initialHeight = fieldset.offsetHeight; + document.querySelector('#elm').style.display = 'none'; + assert_equals(fieldset.offsetHeight, initialHeight); +}, 'Fieldset with a percentage height should not increase the height on every reflow.'); +</script> |