src/third_party/WebKit/LayoutTests/fast/clip/overflow-border-radius-transformed.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     transform: rotate(45deg);
  18 }
  19 </style>
  20 </head>
  21 <body>
  22 The white text and grey backgrounds should all clip to the border-radius.
  23 <br>
  24
  25 <!-- static container -->
  26 <div class="outer" style="position: static;">
  27     <div class="inner" style="position: static;">
  28         static &gt; static
  29     </div>
  30 </div>
  31
  32 <div class="outer" style="position: static;">
  33     <div class="inner" style="position: relative;">
  34         static &gt; relative
  35     </div>
  36 </div>
  37
  38 <!-- relative container -->
  39 <div class="outer" style="position: relative;">
  40     <div class="inner" style="position: static;">
  41         relative &gt; static
  42     </div>
  43 </div>
  44
  45 <div class="outer" style="position: relative;">
  46     <div class="inner" style="position: relative;">
  47         relative &gt; relative
  48     </div>
  49 </div>
  50 <br>
  51 <div class="outer" style="position: relative;">
  52     <div class="inner" style="position: absolute;">
  53         relative &gt; absolute
  54     </div>
  55 </div>