themed-select-padding-no-clip-ref.html (1464B)
1 <!doctype html> 2 <title>Bug 1561794 - padding-inline-end does not clip display text for themed comboboxes.</title> 3 <style> 4 select, .unthemed { 5 font: 16px / 1 monospace; 6 width: 20ch; 7 display: block; 8 } 9 .unthemed { 10 box-sizing: border-box; 11 border: 1px solid grey; 12 } 13 </style> 14 <!--- Ensure the text isn't chopped --> 15 <select><option>XXXXXXXXXXXX</option></select> 16 <select><option>X XXXXXXXXXX</option></select> 17 18 <!--- Test that the display text doesn't overflow the select. --> 19 <select style="overflow: hidden"><option>XXXXXXXXXXXXXXXXXX</option></select> 20 21 <!-- Test that this only affects themed comboboxes --> 22 <div class="unthemed" style="padding-right: 15ch"><div style="padding: 1px 4px; overflow: hidden;">XXXXXXXXXX</div></div> 23 24 <select id="src" style="padding-left: 10ch; padding-right: 10ch"><option>XXXXXXXXXX</option></select> 25 <select id="ref" style="padding-left: 10ch;"><option>XXXXXXXXXX</option></select> 26 <script> 27 // This one is a bit special, because we want `ref` to have the same size as 28 // `src`, which for some reason, with or without the patch for this bug, 29 // grows outside the specified width. Given this width depends on scrollbar, 30 // width, which is platform dependent, we just calculate it from `src`, and 31 // then hide it. 32 // 33 // We just really want to test that the padding right doesn't clip the text 34 // anyhow. 35 ref.style.width = getComputedStyle(src).width; 36 src.style.display = "none"; 37 </script>