third_party/WebKit/LayoutTests/fast/forms/control-clip.html

   1 <head>
   2     <title></title>
   3     <style>
   4         button { border-color: yellow; outline: 2px dashed; padding: 10px; width: 100px; height: 50px; -webkit-appearance: none; }
   5         div.block { outline: 2px dotted blue; border: 2px solid purple; width: 70px; height: 200px; background: teal; }
   6         div.float { float: right; height: 100px; width: 20px; background: darkgreen; }
   7     </style>
   8 </head>
   9 <body>
  10     <p>
  11         Tests that buttons clip their contents.
  12     </p>
  13     <p>
  14         Each button below should have a yellow border and a black dashed outline.
  15         Contents should overflow the yellow border.
  16     </p>
  17     <p>
  18         <button>
  19             <div class="block">
  20                 <div class="float"></div>
  21                 short words only please
  22             </div>
  23         </button>
  24     </p>
  25     <button style="display: block;">
  26         <div class="block">
  27             <div class="float"></div>
  28             short words only please
  29         </div>
  30     </button>
  31     <p>
  32         <button style="position: absolute;">
  33             <div class="block">
  34                 <div class="float"></div>
  35                 short words only please
  36             </div>
  37         </button>
  38     </p>
  39 </body>