LayoutTests/css3/blending/blend-mode-isolation-flags-append-stacking-context-blending.html - WebKit - Git at Google

 <!DOCTYPE HTML>
 <head>
     <!-- This test will check if the isolation flag is properly computed when we append a subtree having blending elements and the root of this subtree creates a stacking context. -->
     <link rel="stylesheet" href="resources/blending-style.css">
     <style>
         div {
             /* This forces render layers, avoiding normal flow only issues */
             position: relative;
          }
         .leaf {
             background-color: #ff00ff;
             left:-25px;
         }
         .append-root {
             background-color: #ffff44;
         }
     </style>
 </head>
 <body>
     <div class="isolating lime box">
         <div id="target" class="yellow box" style="left: 50px;"></div>
     </div>
     <script type="text/javascript">
         if (window.testRunner)
             window.testRunner.waitUntilDone();

         function change() {
             var blendingElement = document.createElement("div");
             blendingElement.className = "leaf box difference";

             var toAppend = document.createElement("div");
             toAppend.appendChild(blendingElement);
             toAppend.className = "isolating box append-root";

             var target = document.getElementById("target");
             target.appendChild(toAppend);

             if (window.testRunner)
                 window.testRunner.notifyDone();
         }

         window.setTimeout("change()", 10);
     </script>
 </body>
	<!DOCTYPE HTML>
	<head>
	<!-- This test will check if the isolation flag is properly computed when we append a subtree having blending elements and the root of this subtree creates a stacking context. -->
	<link rel="stylesheet" href="resources/blending-style.css">
	<style>
	div {
	/* This forces render layers, avoiding normal flow only issues */
	position: relative;
	}
	.leaf {
	background-color: #ff00ff;
	left:-25px;
	}
	.append-root {
	background-color: #ffff44;
	}
	</style>
	</head>
	<body>
	<div class="isolating lime box">
	<div id="target" class="yellow box" style="left: 50px;"></div>
	</div>
	<script type="text/javascript">
	if (window.testRunner)
	window.testRunner.waitUntilDone();

	function change() {
	var blendingElement = document.createElement("div");
	blendingElement.className = "leaf box difference";

	var toAppend = document.createElement("div");
	toAppend.appendChild(blendingElement);
	toAppend.className = "isolating box append-root";

	var target = document.getElementById("target");
	target.appendChild(toAppend);

	if (window.testRunner)
	window.testRunner.notifyDone();
	}

	window.setTimeout("change()", 10);
	</script>
	</body>