overflow-areas-1-ref.html (1616B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <title>Reference case</title> 7 <style> 8 input, button { 9 border: 0; /* Combined, these mean the gray area is the */ 10 background: lightgray; /* border-box size. */ 11 12 outline: 2px solid black; /* The outlined area is the overflow area. */ 13 width: 1px; /* (To attempt to trigger overflow) */ 14 15 display: block; /* Put each button on its own line, w/ some margin, */ 16 margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */ 17 18 font: 8px serif; /* (This just lets the testcase fit better on mobile.) */ 19 } 20 21 .oh { overflow: hidden } 22 </style> 23 </head> 24 <body> 25 <!-- For the reference case, we just put "overflow:hidden" on everything. --> 26 <input class="oh" type="reset"> 27 <input class="oh" type="submit"> 28 <input class="oh" type="button" value="InputTypeButton"> 29 <!-- ...with one exception: button with (default) overflow:visible. 30 Such buttons *do* actually allow their contents to overflow. --> 31 <button>ActualButton</button> 32 33 <input class="oh" type="reset"> 34 <input class="oh" type="submit"> 35 <input class="oh" type="button" value="InputTypeButton"> 36 <button class="oh">ActualButton</button> 37 38 <input class="oh" type="reset"> 39 <input class="oh" type="submit"> 40 <input class="oh" type="button" value="InputTypeButton"> 41 42 <input class="oh" type="reset"> 43 <input class="oh" type="submit"> 44 <input class="oh" type="button" value="InputTypeButton"> 45 </body> 46 </html>