css/cssom/cssstyledeclaration-setter-form-controls.html

<!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>