| <!doctype html> |
| <title>fieldset default style</title> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <style> |
| #ref { |
| display: block; |
| margin-left: 2px; |
| margin-right: 2px; |
| /* TODO replace above declarations with these when they are widely supported. |
| margin-inline-start: 2px; |
| margin-inline-end: 2px; |
| */ |
| border: groove 2px ThreeDFace; |
| padding: 0.35em 0.75em 0.625em 0.75em; |
| /* TODO replace above declarations with these when they are widely supported. |
| padding-block-start: 0.35em; |
| padding-inline-end: 0.75em; |
| padding-block-end: 0.625em; |
| padding-inline-start: 0.75em; |
| */ |
| min-width: min-content; |
| /* TODO change the above to min-inline-size when it's widely supported. */ |
| } |
| </style> |
| <fieldset id=test></fieldset> |
| <div id=ref></div> |
| <script> |
| const testElm = document.querySelector('#test'); |
| const refElm = document.querySelector('#ref'); |
| const props = ['display', |
| 'margin-top', |
| 'margin-right', |
| 'margin-bottom', |
| 'margin-left', |
| 'border-top-style', |
| 'border-right-style', |
| 'border-bottom-style', |
| 'border-left-style', |
| 'border-top-width', |
| 'border-right-width', |
| 'border-bottom-width', |
| 'border-left-width', |
| 'border-top-color', |
| 'border-right-color', |
| 'border-bottom-color', |
| 'border-left-color', |
| 'padding-top', |
| 'padding-right', |
| 'padding-bottom', |
| 'padding-left', |
| 'min-width', |
| ]; |
| const testStyle = getComputedStyle(testElm); |
| const refStyle = getComputedStyle(refElm); |
| props.forEach(prop => { |
| test(() => { |
| assert_equals(testStyle[prop], refStyle[prop]); |
| }, `${prop}`); |
| }); |
| </script> |