src/third_party/WebKit/LayoutTests/fast/backgrounds/background-leakage-transforms.html

   1 <html>
   2    <head>
   3       <style type="text/css">
   4         .grouping {
   5           margin: 10px;
   6           padding: 2px;
   7           display: inline-block;
   8         }
   9
  10         .box {
  11           display: inline-block;
  12           margin: 10px;
  13           height: 100px;
  14           width: 110px;
  15           background-color: black;
  16           border: 20px solid white;
  17           border-radius: 50px;
  18           -moz-box-sizing: border-box;
  19           box-sizing: border-box;
  20         }
  21
  22         .translucent {
  23           background-color: gray;
  24         }
  25         .translucent > .box {
  26           background-color: white;
  27           border-color: rgba(0, 0, 255, 0.5);
  28         }
  29
  30         .scaled {
  31           transform: scale(1, 0.33);
  32           -webkit-transform-origin: top left;
  33         }
  34
  35         .vertical {
  36           -webkit-writing-mode: vertical-lr;
  37         }
  38       </style>
  39    </head>
  40    <body>
  41      <div>
  42         <div class="grouping">
  43          <div class="box"></div>
  44          <div class="box" style="border-style: double; border-color: groove;"></div>
  45        </div>
  46        <div class="translucent grouping">
  47          <div class="box"></div>
  48          <div class="box" style="border-style: double; border-color: groove;"></div>
  49        </div>
  50      </div>
  51
  52      <div class="scaled">
  53         <div class="grouping">
  54          <div class="box"></div>
  55          <div class="box" style="border-style: double; border-color: groove;"></div>
  56        </div>
  57        <div class="translucent grouping">
  58          <div class="box"></div>
  59          <div class="box" style="border-style: double; border-color: groove;"></div>
  60        </div>
  61      </div>
  62
  63      <div class="scaled vertical">
  64         <div class="grouping">
  65          <div class="box"></div>
  66          <div class="box" style="border-style: double; border-color: groove;"></div>
  67        </div>
  68        <div class="translucent grouping">
  69          <div class="box"></div>
  70          <div class="box" style="border-style: double; border-color: groove;"></div>
  71        </div>
  72      </div>
  73    </body>
  74 </html>