The Tor Browser / file comparison
comparison: layout/reftests/css-blending/mix-blend-mode-nested-976533.html
layout/reftests/css-blending/mix-blend-mode-nested-976533.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:30eb5dd471d6 |
|---|---|
| 1 <!DOCTYPE HTML> | |
| 2 <head> | |
| 3 <style> | |
| 4 .parent { | |
| 5 width: 200px; | |
| 6 height: 200px; | |
| 7 position: absolute; | |
| 8 z-index: 1; | |
| 9 background-color: #00ff00; | |
| 10 } | |
| 11 | |
| 12 .intermediate { | |
| 13 width: 100px; | |
| 14 height: 100px; | |
| 15 margin-left:50px; | |
| 16 background-color: #ff00ff; | |
| 17 mix-blend-mode: difference; | |
| 18 } | |
| 19 | |
| 20 .child { | |
| 21 width: 100px; | |
| 22 height: 100px; | |
| 23 margin-left:50px; | |
| 24 background-color: #00ffff; | |
| 25 mix-blend-mode: multiply; | |
| 26 } | |
| 27 | |
| 28 body { | |
| 29 margin:0px; | |
| 30 } | |
| 31 </style> | |
| 32 <!-- Blending should happen as follows: | |
| 33 First, the child element should blend with the intermediate element, with | |
| 34 the multiply operator. Is should not blend with the parent directly. | |
| 35 Then, group formed by the blended child and the intermediate element should | |
| 36 blend with the parent as a single layer. | |
| 37 --> | |
| 38 </head> | |
| 39 <body> | |
| 40 <div class="parent"> | |
| 41 <div class="intermediate"> | |
| 42 <div class="child"></div> | |
| 43 </div> | |
| 44 </div> | |
| 45 </body> |
