legend-block-formatting-context.html (2887B)
1 <!DOCTYPE html> 2 <title>The legend element: block formatting context</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 /* Set margin and padding for fieldset to 0 to make things simpler */ 7 fieldset { 8 margin: 0; 9 padding: 0; 10 } 11 .wrapper { 12 height: 200px; 13 position: relative; 14 } 15 .float { 16 float: left; 17 width: 50px; 18 height: 50px; 19 background-color: orange; 20 } 21 </style> 22 23 <div class=wrapper> 24 <div class=float></div> 25 <legend id=in-body><div class=float></div></legend> 26 <div class=float></div> 27 </div> 28 29 <div class=wrapper> 30 <fieldset> 31 <div class=float></div> 32 <legend id=rendered-legend><div class=float></div></legend> 33 <legend id=in-fieldset-second-child><div class=float></div></legend> 34 <div><legend id=in-fieldset-descendant><div class=float></div></legend></div> 35 </fieldset> 36 </div> 37 38 <script> 39 const fieldsetBorderWidth = 2; 40 const legendPadding = 2; 41 42 test(() => { 43 const legend = document.getElementById('in-body'); 44 assert_equals(legend.offsetLeft, 0, 'legend.offsetLeft'); 45 assert_equals(legend.offsetTop, 0, 'legend.offsetTop'); 46 assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); 47 const divAfter = legend.nextElementSibling; 48 assert_equals(divAfter.offsetLeft, 100, 'divAfter.offsetLeft'); 49 assert_equals(divAfter.offsetTop, 0, 'divAfter.offsetTop'); 50 }, 'in-body'); 51 52 test(() => { 53 const legend = document.getElementById('rendered-legend'); 54 assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); 55 assert_equals(legend.offsetTop, 0, 'legend.offsetTop'); 56 assert_equals(legend.clientHeight, 50, 'legend.clientHeight'); 57 const divChild = legend.firstChild; 58 assert_equals(divChild.offsetLeft, fieldsetBorderWidth + legendPadding, 'divChild.offsetLeft'); 59 assert_equals(divChild.offsetTop, 0, 'divChild.offsetTop'); 60 }, 'rendered-legend'); 61 62 test(() => { 63 const legend = document.getElementById('in-fieldset-second-child'); 64 assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); 65 assert_equals(legend.offsetTop, 50, 'legend.offsetTop'); 66 assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); 67 const divChild = legend.firstChild; 68 assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50, 'divChild.offsetLeft'); 69 assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop'); 70 }, 'in-fieldset-second-child'); 71 72 test(() => { 73 const legend = document.getElementById('in-fieldset-descendant'); 74 assert_equals(legend.offsetLeft, fieldsetBorderWidth, 'legend.offsetLeft'); 75 assert_equals(legend.offsetTop, 50, 'legend.offsetTop'); 76 assert_equals(legend.clientHeight, 0, 'legend.clientHeight'); 77 const divChild = legend.firstChild; 78 assert_equals(divChild.offsetLeft, fieldsetBorderWidth + 50 + 50, 'divChild.offsetLeft'); 79 assert_equals(divChild.offsetTop, 50, 'divChild.offsetTop'); 80 }, 'in-fieldset-descendant'); 81 </script>