focus-large-element-in-overflow-hidden-container-ref.html (879B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858984"> 8 <style> 9 #overflowHiddenContainer 10 { 11 margin: 4px; 12 height: 12px; 13 border: 1px solid black; 14 overflow: hidden; 15 line-height: 25px; 16 } 17 18 #container 19 { 20 position: relative; 21 display: inline-block; 22 width: 30px; 23 height: 10px; 24 vertical-align: text-top; 25 } 26 27 #visibleTarget 28 { 29 position: absolute; 30 inset: 0; 31 height: 15px; 32 } 33 34 </style> 35 </head> 36 <body> 37 <div id="overflowHiddenContainer"> 38 <label id="container"> 39 <div tabindex=0 id="visibleTarget"> 40 </div> 41 </label> 42 </div> 43 </body> 44 <script> 45 visibleTarget.focus(); 46 </script> 47 </html>