| <!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; | |
| 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', | |
| '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> |