layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html@925c144e1f1f
layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>CSS Test: blending between an element and the child with opacity</title>
5 <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
6 <link rel="help" href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode">
7 <meta name="flags" content="">
8 <meta name="assert" content="Test checks that an element with mix-blend-mode and his child with opacity blends as a group(no blending between the element with mix-blend-mode and the child element)">
9 <link rel="match" href="reference/mix-blend-mode-child-of-blended-has-opacity-ref.html">
10 <style>
11 .parent {
12 opacity: 0.9;
13 background: yellow;/*rgb(255,255,0);*/
14 margin: 30px;
15 width: 120px;
16 height: 120px;
17 display: inline-block;
18 }
19 .blended {
20 width: 100px;
21 height: 100px;
22 background: fuchsia; /* rgb(255, 0, 255);*/
23 display: inline-block;
24 mix-blend-mode: difference;
25 margin-top: 10px;
26 margin-left: 10px;
27 }
28 .childBlended {
29 background: red;/*rgb(255,0,0);*/
30 width: 80px;
31 height: 80px;
32 margin-top: 10px;
33 margin-left: 10px;
34 opacity: 0.99;
35 }
36 </style>
37 </head>
38 <body>
39 <div class="parent">
40 <div class="blended">
41 <div class="childBlended"></div>
42 </div>
43 </div>
44 </body>
45 </html>
