focus-large-element-in-overflow-hidden-container.html (1201B)
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 <link rel="match" href="focus-large-element-in-overflow-hidden-container-ref.html"> 9 <style> 10 #overflowHiddenContainer 11 { 12 margin: 4px; 13 height: 12px; 14 border: 1px solid black; 15 overflow: hidden; 16 line-height: 25px; 17 } 18 19 #container 20 { 21 position: relative; 22 display: inline-block; 23 width: 30px; 24 height: 10px; 25 vertical-align: text-top; 26 } 27 28 #visibleTarget 29 { 30 position: absolute; 31 left: 0; 32 top: 0; 33 right: 0; 34 bottom: 0; 35 height: 15px; 36 } 37 38 #error 39 { 40 position: absolute; 41 left: 0; 42 bottom: 0; 43 background-color: red; 44 height: 3px; 45 width: 3px; 46 } 47 </style> 48 </head> 49 <body> 50 <div id="overflowHiddenContainer"> 51 <label id="container"> 52 <div tabindex=0 id="visibleTarget"> 53 <div id="error"></div> 54 </div> 55 </label> 56 </div> 57 </body> 58 <script> 59 visibleTarget.focus(); 60 </script> 61 </html>