tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

cssstyledeclaration-setter-form-controls.html (2875B)

      1 <!doctype html>
      2 <title>CSSOM test: no side effects from setting "height"</title>
      3 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty">
      4 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=107380">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 
      8 <p>
      9 Historically, the Apple Safari web browser has added an "intrinsic margin" to
     10 form controls which do not specify a `height`. It removed this margin following
     11 modification of the `height`. <a
     12 href="https://bugs.webkit.org/show_bug.cgi?id=107380">This non-standard
     13 behavior was identified as a source of confusion for web developers.</a>
     14 </p>
     15 
     16 <script>
     17 function makeElement(tagName) {
     18  var element = document.createElement(tagName);
     19  document.body.appendChild(element);
     20  return element;
     21 }
     22 function makeInputElement(type) {
     23  var element = makeElement('input');
     24  element.setAttribute('type', type);
     25  return element;
     26 }
     27 function measure(element) {
     28  var computed = getComputedStyle(element);
     29  return [computed.marginTop, computed.marginBottom];
     30 }
     31 
     32 test(function() {
     33  var element = makeInputElement('text');
     34  var initial = measure(element);
     35 
     36  element.style.setProperty('height', '12px');
     37 
     38  assert_array_equals(measure(element), initial);
     39 }, 'text input element');
     40 
     41 test(function() {
     42  var element = makeInputElement('button');
     43  var initial = measure(element);
     44 
     45  element.style.setProperty('height', '12px');
     46 
     47  assert_array_equals(measure(element), initial);
     48 }, 'button input element');
     49 
     50 test(function() {
     51  var element = makeInputElement('submit');
     52  var initial = measure(element);
     53 
     54  element.style.setProperty('height', '12px');
     55 
     56  assert_array_equals(measure(element), initial);
     57 }, 'submit input element');
     58 
     59 test(function() {
     60  var element = makeInputElement('radio');
     61  var initial = measure(element);
     62 
     63  element.style.setProperty('height', '12px');
     64 
     65  assert_array_equals(measure(element), initial);
     66 }, 'radio input element');
     67 
     68 test(function() {
     69  var element = makeInputElement('checkbox');
     70  var initial = measure(element);
     71 
     72  element.style.setProperty('height', '12px');
     73 
     74  assert_array_equals(measure(element), initial);
     75 }, 'checkbox input element');
     76 
     77 test(function() {
     78  var element = makeElement('textarea');
     79  var initial = measure(element);
     80 
     81  element.style.setProperty('height', '12px');
     82 
     83  assert_array_equals(measure(element), initial);
     84 }, 'textarea element');
     85 
     86 test(function() {
     87  var element = makeElement('select');
     88  var initial = measure(element);
     89 
     90  element.style.setProperty('height', '12px');
     91 
     92  assert_array_equals(measure(element), initial);
     93 }, 'select element');
     94 
     95 test(function() {
     96  var element = makeElement('button')
     97  var initial = measure(element);
     98 
     99  element.style.setProperty('height', '12px');
    100 
    101  assert_array_equals(measure(element), initial);
    102 }, 'button element');
    103 </script>