test_unstyled_control_height.html (2094B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <style> 5 #container *, #container2 * { 6 white-space: nowrap; 7 appearance: none; 8 } 9 input { 10 /* Reduce the width so that container can fit all its children in 600px viewport width. */ 11 width: 100px; 12 } 13 /* date by default uses a monospace font, which might have different metrics */ 14 input, button, select { 15 font: Menu; 16 } 17 .small-font * { 18 font-size: 8px !important; /* important to override rule above */ 19 } 20 .no-padding * { 21 padding: 0; 22 } 23 </style> 24 25 <!-- Each container should fit all its children in the same line to verify every 26 child has the same |top|. --> 27 <div id="container"> 28 <input> 29 <!-- Putting the <input> containing Burmese characters here is just to verify 30 our current behavior. They are slightly clipped. So if we fix it by 31 making the <input> taller, it's OK to remove it from this test. --> 32 <input value="漢字 jpg မြန်မာစာ"> 33 <input type=date> 34 <button>Foo</button> 35 <select><option>Foo</option></select> 36 </div> 37 38 <br> 39 <div id="container2"> 40 <button>漢字 Foo မြန်မာစာ</button> 41 <select><option>漢字 Foo မြန်မာစာ</option></select> 42 </div> 43 44 <script> 45 function testHeightMatches(id, desc) { 46 let commonHeight = null; 47 let commonTop = null; 48 for (let element of document.querySelectorAll(`#${id} > *`)) { 49 let rect = element.getBoundingClientRect(); 50 if (commonHeight === null) { 51 commonHeight = rect.height; 52 commonTop = rect.top; 53 } 54 is(rect.height, commonHeight, `Height of the controls should match for ${element.outerHTML}${desc}`); 55 is(rect.top, commonTop, `Top of the controls should match for ${element.outerHTML}${desc}`); 56 } 57 } 58 59 for (id of ["container", "container2"]) { 60 const container = document.getElementById(id); 61 62 testHeightMatches(id, ""); 63 64 container.className = "no-padding"; 65 66 testHeightMatches(id, " without padding"); 67 68 container.className = "small-font"; 69 70 testHeightMatches(id, " with an small font"); 71 } 72 </script>