chromium/src/third_party/blink/web_tests/paint/invalidation/flexbox/align-self-change-keeping-geometry-grid-expected.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE HTML>
 <style>
 body {
   margin: 0;
 }
 #container {
   display: grid;
   grid: 300px / 100px 100px;
   width: 200px;
   height: 300px;
   background-color: red;
 }
 .item1 {
   grid-row: 1;
   grid-column: 1;
   align-self: start;
   height: 300px;
   width: 100px;
   background-color: green;
 }
 .item2 {
   grid-row: 1;
   grid-column: 2;
   align-self: start;
   background-color: green;
   height: 300px;
   width: 100px;
 }
 .item3 {
   grid-row: 1;
   grid-column: 2;
   align-self: end;
   background-color: green;
   height: 300px;
   width: 100px;
 }
 </style>
 <p style="height: 20px">There should be no invalidations because align-self style change causes no visual change.</p>
 <div id="container">
   <div class="item1">
     <div style="height: 300px;"></div>
   </div>
   <div class="item2"></div>
   <div class="item3"></div>
 </div>
	<!DOCTYPE HTML>
	<style>
	body {
	margin: 0;
	}
	#container {
	display: grid;
	grid: 300px / 100px 100px;
	width: 200px;
	height: 300px;
	background-color: red;
	}
	.item1 {
	grid-row: 1;
	grid-column: 1;
	align-self: start;
	height: 300px;
	width: 100px;
	background-color: green;
	}
	.item2 {
	grid-row: 1;
	grid-column: 2;
	align-self: start;
	background-color: green;
	height: 300px;
	width: 100px;
	}
	.item3 {
	grid-row: 1;
	grid-column: 2;
	align-self: end;
	background-color: green;
	height: 300px;
	width: 100px;
	}
	</style>
	<p style="height: 20px">There should be no invalidations because align-self style change causes no visual change.</p>
	<div id="container">
	<div class="item1">
	<div style="height: 300px;"></div>
	</div>
	<div class="item2"></div>
	<div class="item3"></div>
	</div>