layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <meta charset="utf-8">
   4 <title>Blend mode containers shouldn't clip unclipped children to their own clip</title>
   5
   6 <style>
   7
   8 body {
   9   margin: 0;
  10 }
  11
  12 .content {
  13   box-sizing: border-box;
  14   border: 10px solid black;
  15   width: 100px;
  16   height: 100px;
  17 }
  18
  19 .clip {
  20   box-sizing: border-box;
  21   width: 300px;
  22   height: 200px;
  23   border: 10px solid black;
  24   overflow: hidden;
  25 }
  26
  27 .opacity {
  28   opacity: 0.5;
  29 }
  30
  31 .absolutelyPositioned {
  32   position: absolute;
  33   top: 20px;
  34   left: 250px;
  35 }
  36
  37 .mixBlendMode {
  38   border-color: blue;
  39   margin-left: auto;
  40 }
  41
  42 </style>
  43
  44 <div class="clip">
  45   <div class="opacity">
  46     <div class="absolutelyPositioned content"></div>
  47     <div class="mixBlendMode content"></div>
  48   </div>
  49 </div>