chromium/src/third_party/blink/web_tests/compositing/overflow/nested-vertical-rl-overflow-expected.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <style>
 .container {
   width: 300px;
   height: 120px;
   border: 2px solid green;
   padding: 2px;
   writing-mode: vertical-rl;
   overflow: scroll;
 }
 .container .container {
   width: 150px;
   height: 100px;
 }
 .bloat {
   width: 1000px;
   height: 1000px;
 }
 .content {
   width: 50px;
   height: 80px;
   border: 1px solid blue;
   background: lightgray;
 }
 </style>
 Neither container is composited:
 <div class="container">
   <div class="bloat">
     <div class="content">Non-composited</div>
     <div id="c1" class="content">Composited</div>
     <div class="container">
       <div class="bloat">
         <div class="content">Non-composited</div>
         <div id="c2" class="content">Composited</div>
       </div>
     </div>
   </div>
 </div>
 Only the outer container is composited:
 <div class="container">
   <div class="bloat">
     <div class="content">Non-composited</div>
     <div class="content">Composited</div>
     <div class="container">
       <div class="bloat">
         <div class="content">Non-composited</div>
         <div class="content">Composited</div>
       </div>
     </div>
   </div>
 </div>
 Only the inner container is composited:
 <div class="container">
   <div class="bloat">
     <div class="content">Non-composited</div>
     <div class="content">Composited</div>
     <div class="container">
       <div class="bloat">
         <div class="content">Non-composited</div>
         <div class="content">Composited</div>
       </div>
     </div>
   </div>
 </div>
 Both containers are composited:
 <div class="container">
   <div class="bloat">
     <div class="content">Non-composited</div>
     <div class="content">Composited</div>
     <div class="container">
       <div class="bloat">
         <div class="content">Non-composited</div>
         <div class="content">Composited</div>
       </div>
     </div>
   </div>
 </div>
	<!DOCTYPE html>
	<style>
	.container {
	width: 300px;
	height: 120px;
	border: 2px solid green;
	padding: 2px;
	writing-mode: vertical-rl;
	overflow: scroll;
	}
	.container .container {
	width: 150px;
	height: 100px;
	}
	.bloat {
	width: 1000px;
	height: 1000px;
	}
	.content {
	width: 50px;
	height: 80px;
	border: 1px solid blue;
	background: lightgray;
	}
	</style>
	Neither container is composited:
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div id="c1" class="content">Composited</div>
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div id="c2" class="content">Composited</div>
	</div>
	</div>
	</div>
	</div>
	Only the outer container is composited:
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div class="content">Composited</div>
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div class="content">Composited</div>
	</div>
	</div>
	</div>
	</div>
	Only the inner container is composited:
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div class="content">Composited</div>
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div class="content">Composited</div>
	</div>
	</div>
	</div>
	</div>
	Both containers are composited:
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div class="content">Composited</div>
	<div class="container">
	<div class="bloat">
	<div class="content">Non-composited</div>
	<div class="content">Composited</div>
	</div>
	</div>
	</div>
	</div>