<!doctype html> <title>CSSOM test: no side effects from setting "height"</title> <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty"> <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=107380"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <p> Historically, the Apple Safari web browser has added an "intrinsic margin" to form controls which do not specify a `height`. It removed this margin following modification of the `height`. <a href="https://bugs.webkit.org/show_bug.cgi?id=107380">This non-standard behavior was identified as a source of confusion for web developers.</a> </p> <script> function makeElement(tagName) { var element = document.createElement(tagName); document.body.appendChild(element); return element; } function makeInputElement(type) { var element = makeElement('input'); element.setAttribute('type', type); return element; } function measure(element) { var computed = getComputedStyle(element); return [computed.marginTop, computed.marginBottom]; } test(function() { var element = makeInputElement('text'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'text input element'); test(function() { var element = makeInputElement('button'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'button input element'); test(function() { var element = makeInputElement('submit'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'submit input element'); test(function() { var element = makeInputElement('radio'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'radio input element'); test(function() { var element = makeInputElement('checkbox'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'checkbox input element'); test(function() { var element = makeElement('textarea'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'textarea element'); test(function() { var element = makeElement('select'); var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'select element'); test(function() { var element = makeElement('button') var initial = measure(element); element.style.setProperty('height', '12px'); assert_array_equals(measure(element), initial); }, 'button element'); </script>