themed-select-padding-no-clip.html (1198B)
1 <!doctype html> 2 <title>Bug 1561794 - padding-inline-end does not clip display text for themed comboboxes.</title> 3 <style> 4 select { 5 font: 16px / 1 monospace; 6 width: 20ch; 7 display: block; 8 } 9 .unthemed { 10 -moz-appearance: none; 11 -webkit-appearance: none; 12 border: 1px solid grey; 13 background: transparent; 14 } 15 </style> 16 <!--- Ensure the text isn't chopped --> 17 <select style="padding-right: 15ch"><option>XXXXXXXXXXXX</option></select> 18 <select style="padding-right: 15ch"><option>X XXXXXXXXXX</option></select> 19 20 <!--- Test that the display text doesn't overflow the select. It'd be nice to test it doesn't overlap the button (which is true), but that seems hard to test via a reftest --> 21 <select style="padding-right: 15ch"><option>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</option></select> 22 23 <!-- Test that this only affects themed comboboxes; 4px is the padding-inline-start of the comboboxcontrol-frame anon box, so as to clip exactly at a character boundary. --> 24 <select class="unthemed" style="color: initial; padding-right: 15ch"><option>XXXXXXXXXX</option></select> 25 26 <select style="padding-left: 10ch; padding-right: 10ch"><option>XXXXXXXXXX</option></select>