1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/css-blending/mix-blend-mode-nested-976533.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,45 @@
1.4 +<!DOCTYPE HTML>
1.5 +<head>
1.6 + <style>
1.7 + .parent {
1.8 + width: 200px;
1.9 + height: 200px;
1.10 + position: absolute;
1.11 + z-index: 1;
1.12 + background-color: #00ff00;
1.13 + }
1.14 +
1.15 + .intermediate {
1.16 + width: 100px;
1.17 + height: 100px;
1.18 + margin-left:50px;
1.19 + background-color: #ff00ff;
1.20 + mix-blend-mode: difference;
1.21 + }
1.22 +
1.23 + .child {
1.24 + width: 100px;
1.25 + height: 100px;
1.26 + margin-left:50px;
1.27 + background-color: #00ffff;
1.28 + mix-blend-mode: multiply;
1.29 + }
1.30 +
1.31 + body {
1.32 + margin:0px;
1.33 + }
1.34 + </style>
1.35 + <!-- Blending should happen as follows:
1.36 + First, the child element should blend with the intermediate element, with
1.37 + the multiply operator. Is should not blend with the parent directly.
1.38 + Then, group formed by the blended child and the intermediate element should
1.39 + blend with the parent as a single layer.
1.40 + -->
1.41 +</head>
1.42 +<body>
1.43 + <div class="parent">
1.44 + <div class="intermediate">
1.45 + <div class="child"></div>
1.46 + </div>
1.47 + </div>
1.48 +</body>
