layout/reftests/css-blending/bug1281593-ref.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4   <head>
   5     <title>Transform and Blend Mode</title>
   6     <style>
   7       body {
   8         background: cornflowerblue;
   9       }
  10       .box-blend-mode {
  11         width: 64px;
  12         height: 64px;
  13         margin-bottom: 1em;
  14         background-color: hsla(0,0%,0%,.25);
  15         mix-blend-mode: multiply;
  16       }
  17       .box-blend-mode-inner {
  18         width: 48px;
  19         height: 48px;
  20         background-image: url("../backgrounds/transparent-32x32.png");
  21         background-position: center center;
  22         background-repeat: no-repeat;
  23         mix-blend-mode: multiply;
  24       }
  25
  26       .box-blend-mode-inner.transformed {
  27         transform: rotate(45deg);
  28       }
  29
  30     </style>
  31   </head>
  32   <body>
  33     <div class="box-blend-mode">
  34       <div class="box-blend-mode-inner"></div>
  35     </div>
  36     <div class="box-blend-mode">
  37       <div class="box-blend-mode-inner"></div>
  38     </div>
  39   </body>
  40 </html>