legend-align-justify-self.html (1342B)
1 <!doctype html> 2 <title>legend align to justify-self</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <fieldset><legend>x</legend></fieldset> 6 <fieldset><legend align=left>x</legend></fieldset> 7 <fieldset><legend align=center>x</legend></fieldset> 8 <fieldset><legend align=right>x</legend></fieldset> 9 <fieldset><legend align=lEfT>x</legend></fieldset> 10 <fieldset><legend align=cEnTeR>x</legend></fieldset> 11 <fieldset><legend align=rIgHt>x</legend></fieldset> 12 <!-- invalid values --> 13 <fieldset><legend align=justify>x</legend></fieldset> 14 <fieldset><legend align="left ">x</legend></fieldset> 15 <!-- dir --> 16 <fieldset><legend dir=ltr>x</legend></fieldset> 17 <fieldset><legend dir=rtl>x</legend></fieldset> 18 <fieldset dir=rtl><legend dir=ltr>x</legend></fieldset> 19 <fieldset dir=rtl><legend dir=rtl>x</legend></fieldset> 20 <script> 21 for (const fieldset of document.querySelectorAll('fieldset')) { 22 test(() => { 23 const legend = fieldset.firstChild; 24 const align = legend.align.toLowerCase(); 25 let expected = 'auto'; 26 switch (align) { 27 case 'left': expected = 'left'; break; 28 case 'center': expected = 'center'; break; 29 case 'right': expected = 'right'; break; 30 } 31 assert_equals(getComputedStyle(legend).justifySelf, expected); 32 }, `${fieldset.outerHTML}`) 33 } 34 </script>