computed-style.html (2433B)
1 <!doctype html> 2 <title>computed style on buttons</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <div class="tests"> 6 <input type="reset"> 7 <input type="button"> 8 <input type="submit"> 9 <input type="color"> 10 <input type="image"> 11 <button></button> 12 </div> 13 <script> 14 // "behave as" doesn't change computed value. 15 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']; 16 for (const val of displayValues) { 17 [].slice.call(document.querySelectorAll('.tests > *')).forEach(el => { 18 el.style.display = '' 19 el.style.display = val; 20 const attrs = el.type ? ` type=${el.type}` : ''; 21 const tag = `<${el.localName}${attrs}>`; 22 test(() => { 23 assert_not_equals(el.style.display, '', `display: ${val} is not supported`) 24 let expectedVal = val; 25 if (el instanceof HTMLInputElement && val === 'contents') { 26 expectedVal = 'none'; // https://drafts.csswg.org/css-display/#unbox-html 27 } 28 if (val == 'flow') { 29 // Use the more backwards-compatible form, `block` is better than `flow` 30 // https://drafts.csswg.org/cssom/#serializing-css-values 31 expectedVal = 'block'; 32 } 33 assert_equals(getComputedStyle(el).display, expectedVal); 34 }, `computed display of ${tag} with display: ${val}`); 35 }); 36 } 37 38 for (let input of document.querySelectorAll("input")) { 39 test(() => { 40 if (input.type == "image") { 41 assert_equals(getComputedStyle(input).overflow, "visible", "Should not be clip by default"); 42 return; 43 } 44 assert_equals(getComputedStyle(input).overflow, "clip", "Should be clip by default"); 45 assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Should use 0 margin"); 46 input.style.overflow = "visible"; 47 input.style.overflowClipMargin = "10px"; 48 assert_equals(getComputedStyle(input).overflow, "clip", "Clip be !important"); 49 assert_equals(getComputedStyle(input).overflowClipMargin, "0px", "Clip margin should be !important too"); 50 }, `<input type=${input.type}> overflow/overflow-clip-margin`); 51 } 52 </script>