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