flex-legend-float-abspos.html (2691B)
1 <!doctype html> 2 <title> 3 legend and float and position: absolute/fixed when the display type of 4 the fieldset is flex. 5 </title> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 <style> 9 body { margin: 0; } 10 fieldset { 11 border: 10px solid; 12 display: flex; 13 margin: 0; 14 padding: 20px; 15 width: 300px; 16 } 17 legend { height: 10px; } 18 #legend1 { float: left; } 19 #legend2 { float: right; } 20 #legend3 { position: absolute; } 21 #legend4 { position: fixed; } 22 </style> 23 <fieldset id=fieldset> 24 <div>div</div> 25 <legend id=legend1>legend1</legend> 26 <legend id=legend2>legend2</legend> 27 <legend id=legend3>legend3</legend> 28 <legend id=legend4>legend4</legend> 29 <legend id=legend5>legend5</legend> 30 </fieldset> 31 <script> 32 const fieldset = document.getElementById('fieldset'); 33 const legends = document.getElementsByTagName('legend'); 34 const [legend1, legend2, legend3, legend4, legend5] = legends; 35 const expectedTop = 0; 36 const expectedLeft = 10 + 20; 37 38 function assert_rendered_legend(legend) { 39 assert_equals(legend.offsetTop, expectedTop, `${legend.id}.offsetTop`); 40 assert_equals(legend.offsetLeft, expectedLeft, `${legend.id}.offsetLeft`); 41 for (const other of legends) { 42 if (other === legend) { 43 continue; 44 } 45 if (other.offsetTop === expectedTop && other.offsetLeft === expectedLeft) { 46 assert_unreached(`${other.id} should not be the "rendered legend"`); 47 } 48 } 49 } 50 51 test(t => { 52 assert_rendered_legend(legend5); 53 }, 'no dynamic changes'); 54 55 test(t => { 56 const legend = document.createElement('legend'); 57 t.add_cleanup(() => { 58 legend.remove(); 59 }); 60 legend.id = 'script-inserted'; 61 legend.textContent = 'script-inserted legend'; 62 fieldset.insertBefore(legend, legend1); 63 assert_rendered_legend(legend); 64 legend.remove(); 65 assert_rendered_legend(legend5); 66 }, 'inserting a new legend and removing it again'); 67 68 test(t => { 69 t.add_cleanup(() => { 70 legend1.id = 'legend1'; 71 legend2.id = 'legend2'; 72 }); 73 legend2.id = ''; 74 assert_rendered_legend(legend2); 75 legend1.id = ''; 76 assert_rendered_legend(legend1); 77 legend1.id = 'legend1'; 78 assert_rendered_legend(legend2); 79 legend2.id = 'legend2'; 80 assert_rendered_legend(legend5); 81 }, 'dynamic changes to float'); 82 83 test(t => { 84 t.add_cleanup(() => { 85 legend3.id = 'legend3'; 86 legend4.id = 'legend4'; 87 }); 88 legend4.id = ''; 89 assert_rendered_legend(legend4); 90 legend3.id = ''; 91 assert_rendered_legend(legend3); 92 legend3.id = 'legend3'; 93 assert_rendered_legend(legend4); 94 legend4.id = 'legend4'; 95 assert_rendered_legend(legend5); 96 }, 'dynamic changes to position'); 97 </script>