checkbox-clamp-01.html (1028B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>Test clamping width/height of checkbox.</title> 10 <link rel="author" title="Louis Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1400050"> 11 <link rel="match" href="checkbox-clamp-ref.html"> 12 </head> 13 <style> 14 div { 15 position: relative; 16 line-height: 0px; 17 } 18 </style> 19 <body> 20 <div> 21 <input type="checkbox"> 22 <input type="checkbox" checked> 23 </div> 24 <script> 25 // If we grow the checkbox vertically, horizontal size shouldn't change, 26 // instead it should be centered vertically. We grow it by a hundred 27 // pixels, and the reference positions it manually at 50px, which is where 28 // it should end up. 29 for (let input of document.querySelectorAll("input")) { 30 input.style.height = (100 + input.getBoundingClientRect().height) + "px"; 31 } 32 </script> 33 </body> 34 </html>