layout/reftests/css-blending/mix-blend-mode-nested-976533.html

Tue, 06 Jan 2015 21:39:09 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Tue, 06 Jan 2015 21:39:09 +0100
branch
TOR_BUG_9701
changeset 8
97036ab72558
permissions
-rw-r--r--

Conditionally force memory storage according to privacy.thirdparty.isolate;
This solves Tor bug #9701, complying with disk avoidance documented in
https://www.torproject.org/projects/torbrowser/design/#disk-avoidance.

     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 		}
    12 		.intermediate {
    13 			width: 100px;
    14 		  height: 100px;
    15 		  margin-left:50px;
    16 		  background-color: #ff00ff;
    17 		  mix-blend-mode: difference;
    18 		}
    20 		.child {
    21 		  width: 100px;
    22 		  height: 100px;
    23 		  margin-left:50px;
    24 		  background-color: #00ffff;
    25 		  mix-blend-mode: multiply;
    26 		}
    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>

mercurial