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           -webkit-text-orientation: sideways-right;
  38         }
  39       </style>
  40    </head>
  41    <body>
  42      <div>
  43         <div class="grouping">
  44          <div class="box"></div>
  45          <div class="box" style="border-style: double; border-color: groove;"></div>
  46        </div>
  47        <div class="translucent grouping">
  48          <div class="box"></div>
  49          <div class="box" style="border-style: double; border-color: groove;"></div>
  50        </div>
  51      </div>
  52
  53      <div class="scaled">
  54         <div class="grouping">
  55          <div class="box"></div>
  56          <div class="box" style="border-style: double; border-color: groove;"></div>
  57        </div>
  58        <div class="translucent grouping">
  59          <div class="box"></div>
  60          <div class="box" style="border-style: double; border-color: groove;"></div>
  61        </div>
  62      </div>
  63
  64      <div class="scaled vertical">
  65         <div class="grouping">
  66          <div class="box"></div>
  67          <div class="box" style="border-style: double; border-color: groove;"></div>
  68        </div>
  69        <div class="translucent grouping">
  70          <div class="box"></div>
  71          <div class="box" style="border-style: double; border-color: groove;"></div>
  72        </div>
  73      </div>
  74    </body>
  75 </html>