chromium/src/third_party/blink/web_tests/wpt_internal/css/css-sizing/fill-available-block-size.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <script src='/resources/testharness.js'></script>
 <script src='/resources/testharnessreport.js'></script>
 <script src="/resources/check-layout-th.js"></script>
 <meta name="assert" content="Checks the behaviour of -webkit-fill-available in various configurations.">
 <style>
 .content {
   width: 20px;
   height: 20px;
   background: lime;
 }
 .tall-content {
   width: 20px;
   height: 120px;
   background: lime;
 }
 </style>
 <body onload="checkLayout('[data-expected-height]')">

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: block; height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: flex; height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: grid; height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <!-- As the height of the container is indefinite, -webkit-fill-available is treated as auto. -->
 <div style="height: 100%;">
   <div data-expected-height=20 style="display: block; height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=20 style="display: flex; height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=20 style="display: grid; height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: block; min-height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: flex; min-height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: grid; min-height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=20 style="display: block; min-height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=20 style="display: flex; min-height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=20 style="display: grid; min-height: -webkit-fill-available;">
     <div class=content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: block; max-height: -webkit-fill-available;">
     <div class=tall-content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: flex; max-height: -webkit-fill-available;">
     <div class=tall-content></div>
   </div>
 </div>

 <div style="height: 100px;">
   <div data-expected-height=100 style="display: grid; max-height: -webkit-fill-available;">
     <div class=tall-content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=120 style="display: block; max-height: -webkit-fill-available;">
     <div class=tall-content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=120 style="display: flex; max-height: -webkit-fill-available;">
     <div class=tall-content></div>
   </div>
 </div>

 <div style="height: 100%;">
   <div data-expected-height=120 style="display: grid; max-height: -webkit-fill-available;">
     <div class=tall-content></div>
   </div>
 </div>
	<!DOCTYPE html>
	<script src='/resources/testharness.js'></script>
	<script src='/resources/testharnessreport.js'></script>
	<script src="/resources/check-layout-th.js"></script>
	<meta name="assert" content="Checks the behaviour of -webkit-fill-available in various configurations.">
	<style>
	.content {
	width: 20px;
	height: 20px;
	background: lime;
	}
	.tall-content {
	width: 20px;
	height: 120px;
	background: lime;
	}
	</style>
	<body onload="checkLayout('[data-expected-height]')">

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: block; height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: flex; height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: grid; height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<!-- As the height of the container is indefinite, -webkit-fill-available is treated as auto. -->
	<div style="height: 100%;">
	<div data-expected-height=20 style="display: block; height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=20 style="display: flex; height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=20 style="display: grid; height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: block; min-height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: flex; min-height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: grid; min-height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=20 style="display: block; min-height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=20 style="display: flex; min-height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=20 style="display: grid; min-height: -webkit-fill-available;">
	<div class=content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: block; max-height: -webkit-fill-available;">
	<div class=tall-content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: flex; max-height: -webkit-fill-available;">
	<div class=tall-content></div>
	</div>
	</div>

	<div style="height: 100px;">
	<div data-expected-height=100 style="display: grid; max-height: -webkit-fill-available;">
	<div class=tall-content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=120 style="display: block; max-height: -webkit-fill-available;">
	<div class=tall-content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=120 style="display: flex; max-height: -webkit-fill-available;">
	<div class=tall-content></div>
	</div>
	</div>

	<div style="height: 100%;">
	<div data-expected-height=120 style="display: grid; max-height: -webkit-fill-available;">
	<div class=tall-content></div>
	</div>
	</div>