forked from mirrors/gecko-dev
c9a0f65ceb
And hide internal but used values. System fonts are not exposed in the computed style so this should be fine. If we need the old values for some obscure reason, it's trivial to alias them to e.g., menu or so. Differential Revision: https://phabricator.services.mozilla.com/D163269
72 lines
2 KiB
HTML
72 lines
2 KiB
HTML
<!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>
|
|
|
|
<!-- Each container should fit all its children in the same line to verify every
|
|
child has the same |top|. -->
|
|
<div id="container">
|
|
<input>
|
|
<!-- Putting the <input> containing Burmese characters here is just to verify
|
|
our current behavior. They are slightly clipped. So if we fix it by
|
|
making the <input> taller, it's OK to remove it from this test. -->
|
|
<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>
|