legend-block-position-centering.html (1473B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements"> 3 <!-- A test for the following paragraph: 4 The element is expected to be positioned in the block-flow direction such that 5 its border box is centered over the border on the block-start side of the 6 fieldset element. 7 --> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 fieldset { 12 margin: 0; 13 padding: 0; 14 border: 100px solid black; 15 } 16 legend { 17 height: 0px; 18 border-color: yellow; 19 border-style: solid; 20 } 21 </style> 22 <fieldset> 23 <legend style="border-width:50px"></legend> 24 <br> 25 </fieldset> 26 <br> 27 28 <fieldset> 29 <legend style="border-width:25px 50px"></legend> 30 <br> 31 </fieldset> 32 <br> 33 34 <fieldset> 35 <legend style="border-width:10px 50px 40px 50px"></legend> 36 <br> 37 </fieldset> 38 <br> 39 40 <fieldset> 41 <legend style="border-width:40px 50px 10px 50px"></legend> 42 <br> 43 </fieldset> 44 45 <script> 46 function legendBlockOffset(fieldset) { 47 let legend = fieldset.querySelector('legend'); 48 return legend.getBoundingClientRect().y - fieldset.getBoundingClientRect().y; 49 } 50 51 test(() => { 52 let fieldsets = document.querySelectorAll('fieldset'); 53 assert_equals(legendBlockOffset(fieldsets[0]), 0); 54 assert_equals(legendBlockOffset(fieldsets[1]), 25); 55 assert_equals(legendBlockOffset(fieldsets[2]), 25); 56 assert_equals(legendBlockOffset(fieldsets[3]), 25); 57 }, 'Legend\'s border-box should be centere on the fieldset border'); 58 </script>