LayoutTests/fast/clip/overflow-border-radius-combinations.html

   1 <head>
   2 <style>
   3 .outer {
   4     border: 10px solid black;
   5     border-radius: 100px;
   6     overflow: hidden;
   7     width: 200px;
   8     height: 100px;
   9     margin: 10px;
  10     display: inline-block
  11 }
  12 .inner {
  13     background: #808080;
  14     width: 100%;
  15     height: 100%;
  16     color: #FFFFFF;
  17 }
  18 </style>
  19 </head>
  20 <body>
  21 The white text and grey backgrounds should all clip to the border-radius.
  22 <br>
  23
  24 <!-- static container -->
  25 <div class="outer" style="position: static;">
  26     <div class="inner" style="position: static;">
  27         static &gt; static
  28     </div>
  29 </div>
  30
  31 <div class="outer" style="position: static;">
  32     <div class="inner" style="position: relative;">
  33         static &gt; relative
  34     </div>
  35 </div>
  36
  37 <!-- relative container -->
  38 <div class="outer" style="position: relative;">
  39     <div class="inner" style="position: static;">
  40         relative &gt; static
  41     </div>
  42 </div>
  43
  44 <div class="outer" style="position: relative;">
  45     <div class="inner" style="position: relative;">
  46         relative &gt; relative
  47     </div>
  48 </div>
  49 <br>
  50 <div class="outer" style="position: relative;">
  51     <div class="inner" style="position: absolute;">
  52         relative &gt; absolute
  53     </div>
  54 </div>