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