Emilio Cobos Álvarez
779757981d
Matches other browsers' behavior and pre-regression behavior, see https://github.com/whatwg/html/pull/12491. Differential Revision: https://phabricator.services.mozilla.com/D302639
50 lines
2.3 KiB
HTML
50 lines
2.3 KiB
HTML
<!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') {
|
|
expectedVal = 'none'; // https://drafts.csswg.org/css-display/#unbox-html
|
|
}
|
|
if (val == 'flow') {
|
|
// Use the more backwards-compatible form, `block` is better than `flow`
|
|
// https://drafts.csswg.org/cssom/#serializing-css-values
|
|
expectedVal = 'block';
|
|
}
|
|
assert_equals(getComputedStyle(el).display, expectedVal);
|
|
}, `computed display of ${tag} with display: ${val}`);
|
|
});
|
|
}
|
|
|
|
for (let input of document.querySelectorAll("input")) {
|
|
test(() => {
|
|
let clipMargin = input.type == "image" ? "content-box" : "0px"
|
|
assert_equals(getComputedStyle(input).overflow, "clip", "Should be clip by default");
|
|
assert_equals(getComputedStyle(input).overflowClipMargin, clipMargin, "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, clipMargin, "Clip margin should be !important too");
|
|
}, `<input type=${input.type}> overflow/overflow-clip-margin`);
|
|
}
|
|
</script>
|