| <!doctype html> |
| <title>The legend element</title> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <style> |
| #ref { |
| display: block; |
| unicode-bidi: isolate; |
| padding-left: 2px; |
| padding-right: 2px; |
| /* TODO: uncomment this when these properties are widely supported |
| padding-inline-start: 2px; padding-inline-end: 2px; |
| */ |
| } |
| </style> |
| |
| <legend id=in-body></legend> |
| <fieldset> |
| <legend id=rendered-legend></legend> |
| <legend id=in-fieldset-second-child></legend> |
| <div><legend id=in-fieldset-descendant></legend></div> |
| </fieldset> |
| <div id=ref></div> |
| |
| <script> |
| setup(() => { |
| self.legends = [].slice.call(document.querySelectorAll('legend')); |
| self.refStyle = getComputedStyle(document.getElementById('ref')); |
| self.props = ['display', |
| 'unicodeBidi', |
| 'marginTop', |
| 'marginRight', |
| 'marginBottom', |
| 'marginLeft', |
| 'paddingTop', |
| 'paddingRight', |
| 'paddingBottom', |
| 'paddingLeft', |
| 'overflow', |
| // Extra tests |
| 'height', |
| 'box-sizing', |
| ]; |
| }); |
| legends.forEach(legend => { |
| const testStyle = getComputedStyle(legend); |
| props.forEach(prop => { |
| test(() => { |
| assert_equals(testStyle[prop], refStyle[prop]); |
| }, `${legend.id}: ${prop}`); |
| }); |
| |
| // Test width separately since it differs outside fieldset vs. in fieldset vs. rendered legend |
| test(() => { |
| if (legend.id === 'rendered-legend') { |
| assert_equals(testStyle.width, '0px'); |
| } else { |
| assert_not_equals(testStyle.width, '0px'); |
| } |
| }, `${legend.id}: width`); |
| }); |
| </script> |