flex-legend-float-abspos.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/flex-legend-float-abspos.html - WPT Dashboard Interop Dashboard

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