| <!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> |