Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/rendering/widgets/button-layout/computed-style.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>computed style on buttons</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div class="tests">
<input type="reset">
<input type="button">
<input type="submit">
<input type="color">
<input type="image">
<button></button>
</div>
<script>
// "behave as" doesn't change computed value.
const displayValues = ['inline', 'block', 'list-item', 'inline-block', 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption', 'none', 'contents', 'flow', 'flow-root', 'flex', 'grid', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container', 'inline-flex', 'inline-grid'];
for (const val of displayValues) {
[].slice.call(document.querySelectorAll('.tests > *')).forEach(el => {
el.style.display = ''
el.style.display = val;
const attrs = el.type ? ` type=${el.type}` : '';
const tag = `<${el.localName}${attrs}>`;
test(() => {
assert_not_equals(el.style.display, '', `display: ${val} is not supported`)
let expectedVal = val;
if (el instanceof HTMLInputElement && val === 'contents') {
}
if (val == 'flow') {
// Use the more backwards-compatible form, `block` is better than `flow`
expectedVal = 'block';
}
assert_equals(getComputedStyle(el).display, expectedVal);
}, `computed display of ${tag} with display: ${val}`);
});
}
for (let input of document.querySelectorAll("input")) {
test(() => {
if (input.type == "image") {
assert_equals(getComputedStyle(input).overflow, "visible", "Should not be clip by default");
return;
}
assert_equals(getComputedStyle(input).overflow, "clip", "Should be clip by default");
assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Should use 0 margin");
input.style.overflow = "visible";
input.style.overflowClipMargin = "10px";
assert_equals(getComputedStyle(input).overflow, "clip", "Clip be !important");
assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Clip margin should be !important too");
}, `<input type=${input.type}> overflow/overflow-clip-margin`);
}
</script>