LayoutTests/fast/css-grid-layout/grid-item-z-index-change-repaint.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
     -webkit-grid-template-rows: 100px;
     -webkit-grid-template-columns: 200px;
     margin-top: 10px;
 }
 .red {
     background-color: red;
 }
 .green {
     background-color: green;
 }
 .negativeZIndex {
     z-index: -1;
 }
 #item3 {
     width: 200px;
     height: 100px;
 }
 </style>
 <script>
 function modifyZIndexAndDisplay()
 {
     document.getElementById('item1').style.zIndex = 1;
     document.getElementById('item2').style.zIndex = 1;

     document.getElementById('grid3').className = "grid";
 }

 window.onload = modifyZIndexAndDisplay;
 </script>
 </head>
 <body>
 <div>
     <p>This test checks that grid items correctly repaint when 'z-index' changes.</p>
     <p>For this test to pass, there should be no red below.</p>
 </div>

 <div class="grid">
     <div id="item1" class="sizedToGridArea green negativeZIndex firstRowFirstColumn"></div>
     <div class="sizedToGridArea red firstRowFirstColumn"></div>
 </div>

 <div class="grid">
     <div id="item2" class="sizedToGridArea green firstRowFirstColumn"></div>
     <div class="sizedToGridArea red firstRowFirstColumn"></div>
 </div>

 <div id="grid3">
     <div class="sizedToGridArea green firstRowFirstColumn"></div>
     <div id="item3" class="red negativeZIndex firstRowFirstColumn"></div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="resources/grid.css" rel="stylesheet">
	<style>
	.grid {
	-webkit-grid-template-rows: 100px;
	-webkit-grid-template-columns: 200px;
	margin-top: 10px;
	}
	.red {
	background-color: red;
	}
	.green {
	background-color: green;
	}
	.negativeZIndex {
	z-index: -1;
	}
	#item3 {
	width: 200px;
	height: 100px;
	}
	</style>
	<script>
	function modifyZIndexAndDisplay()
	{
	document.getElementById('item1').style.zIndex = 1;
	document.getElementById('item2').style.zIndex = 1;

	document.getElementById('grid3').className = "grid";
	}

	window.onload = modifyZIndexAndDisplay;
	</script>
	</head>
	<body>
	<div>
	<p>This test checks that grid items correctly repaint when 'z-index' changes.</p>
	<p>For this test to pass, there should be no red below.</p>
	</div>

	<div class="grid">
	<div id="item1" class="sizedToGridArea green negativeZIndex firstRowFirstColumn"></div>
	<div class="sizedToGridArea red firstRowFirstColumn"></div>
	</div>

	<div class="grid">
	<div id="item2" class="sizedToGridArea green firstRowFirstColumn"></div>
	<div class="sizedToGridArea red firstRowFirstColumn"></div>
	</div>

	<div id="grid3">
	<div class="sizedToGridArea green firstRowFirstColumn"></div>
	<div id="item3" class="red negativeZIndex firstRowFirstColumn"></div>
	</div>

	</body>
	</html>