diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html')
-rw-r--r-- | testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html new file mode 100644 index 0000000000..f6eead471c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html @@ -0,0 +1,97 @@ +<!doctype html> +<title> + legend and float and position: absolute/fixed when the display type of + the fieldset is flex. +</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style> + body { margin: 0; } + fieldset { + border: 10px solid; + display: flex; + margin: 0; + padding: 20px; + width: 300px; + } + legend { height: 10px; } + #legend1 { float: left; } + #legend2 { float: right; } + #legend3 { position: absolute; } + #legend4 { position: fixed; } +</style> +<fieldset id=fieldset> + <div>div</div> + <legend id=legend1>legend1</legend> + <legend id=legend2>legend2</legend> + <legend id=legend3>legend3</legend> + <legend id=legend4>legend4</legend> + <legend id=legend5>legend5</legend> +</fieldset> +<script> + const fieldset = document.getElementById('fieldset'); + const legends = document.getElementsByTagName('legend'); + const [legend1, legend2, legend3, legend4, legend5] = legends; + const expectedTop = 0; + const expectedLeft = 10 + 20; + + function assert_rendered_legend(legend) { + assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`); + assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`); + for (const other of legends) { + if (other === legend) { + continue; + } + if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) { + assert_unreached(`${other.id} should not be the "rendered legend"`); + } + } + } + + test(t => { + assert_rendered_legend(legend5); + }, 'no dynamic changes'); + + test(t => { + const legend = document.createElement('legend'); + t.add_cleanup(() => { + legend.remove(); + }); + legend.id = 'script-inserted'; + legend.textContent = 'script-inserted legend'; + fieldset.insertBefore(legend, legend1); + assert_rendered_legend(legend); + legend.remove(); + assert_rendered_legend(legend5); + }, 'inserting a new legend and removing it again'); + + test(t => { + t.add_cleanup(() => { + legend1.id = 'legend1'; + legend2.id = 'legend2'; + }); + legend2.id = ''; + assert_rendered_legend(legend2); + legend1.id = ''; + assert_rendered_legend(legend1); + legend1.id = 'legend1'; + assert_rendered_legend(legend2); + legend2.id = 'legend2'; + assert_rendered_legend(legend5); + }, 'dynamic changes to float'); + + test(t => { + t.add_cleanup(() => { + legend3.id = 'legend3'; + legend4.id = 'legend4'; + }); + legend4.id = ''; + assert_rendered_legend(legend4); + legend3.id = ''; + assert_rendered_legend(legend3); + legend3.id = 'legend3'; + assert_rendered_legend(legend4); + legend4.id = 'legend4'; + assert_rendered_legend(legend5); + }, 'dynamic changes to position'); +</script> |