Quellcode-Bibliothek test_unstyled_control_height.html Sprache: unbekannt

<!doctype html>
<meta charset="utf-8">
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<style>
  #container *, #container2 * {
    white-space: nowrap;
    appearance: none;
  }
  input {
    /* Reduce the width so that container can fit all its children in 600px viewport width. */
    width: 100px;
  }
  /* date by default uses a monospace font, which might have different metrics */
  input, button, select {
    font: Menu;
  }
  .small-font * {
    font-size: 8px !important; /* important to override rule above */
  }
  .no-padding * {
    padding: 0;
  }
</style>


<div id="container">
  <input>
  
  <input value="漢字 jpg မြန်မာစာ">
  <input type=date>
  <button>Foo</button>
  <select><option>Foo</option></select>
</div>

<br>
<div id="container2">
  <button>漢字 Foo မြန်မာစာ</button>
  <select><option>漢字 Foo မြန်မာစာ</option></select>
</div>

<script>
function testHeightMatches(id, desc) {
  let commonHeight = null;
  let commonTop = null;
  for (let element of document.querySelectorAll(`#${id} > *`)) {
    let rect = element.getBoundingClientRect();
    if (commonHeight === null) {
      commonHeight = rect.height;
      commonTop = rect.top;
    }
    is(rect.height, commonHeight, `Height of the controls should match for ${element.outerHTML}${desc}`);
    is(rect.top, commonTop, `Top of the controls should match for ${element.outerHTML}${desc}`);
  }
}

for (id of ["container", "container2"]) {
  const container = document.getElementById(id);

  testHeightMatches(id, "");

  container.className = "no-padding";

  testHeightMatches(id, " without padding");

  container.className = "small-font";

  testHeightMatches(id, " with an small font");
}
</script>

Messung V0.5 in Prozent

Quellcode-Bibliothek test_unstyled_control_height.html Sprache: unbekannt

[0.5QuellennavigatorsProjekt 2026-08-26]