chromium/src/third_party/blink/web_tests/external/wpt/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Grid Test: Percentage size on replaced child of a grid item with margin, border, padding and scrollbar</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
 <link rel="match" href="percentage-size-replaced-subitems-001-ref.html">
 <meta name="assert" content="Checks that grid items replaced children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar.">
 <style>
 .grid {
   display: inline-grid;
   border: solid 5px black;
   grid: 100px / 150px;
   margin: 10px;
   vertical-align: top;
 }

 .item {
   overflow: scroll;
   border: solid magenta;
   border-width: 12px 9px 6px 3px;
   margin: 1px 2px 3px 4px;
   padding: 5px 15px 10px 20px;
   background: cyan;
 }

 img {
   width: 100%;
   height: 100%;
   display: block;
 }

 .horizontalTB { writing-mode: horizontal-tb; }
 .verticalLR { writing-mode: vertical-lr; }
 .verticalRL {  writing-mode: vertical-rl; }
 </style>

 <p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>

 <div class="grid">
   <div class="item horizontalTB">
     <img src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item horizontalTB">
     <img class="verticalLR" src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item horizontalTB">
     <img class="verticalRL" src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item verticalLR">
     <img src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item verticalLR">
     <img class="horizontalTB" src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item verticalLR">
     <img class="verticalRL" src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item verticalRL">
     <img src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item verticalRL">
     <img class="horizontalTB" src="support/100x100-green.png" />
   </div>
 </div>

 <div class="grid">
   <div class="item verticalRL">
     <img class="verticalRL" src="support/100x100-green.png" />
   </div>
 </div>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Grid Test: Percentage size on replaced child of a grid item with margin, border, padding and scrollbar</title>
	<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
	<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
	<link rel="match" href="percentage-size-replaced-subitems-001-ref.html">
	<meta name="assert" content="Checks that grid items replaced children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar.">
	<style>
	.grid {
	display: inline-grid;
	border: solid 5px black;
	grid: 100px / 150px;
	margin: 10px;
	vertical-align: top;
	}

	.item {
	overflow: scroll;
	border: solid magenta;
	border-width: 12px 9px 6px 3px;
	margin: 1px 2px 3px 4px;
	padding: 5px 15px 10px 20px;
	background: cyan;
	}

	img {
	width: 100%;
	height: 100%;
	display: block;
	}

	.horizontalTB { writing-mode: horizontal-tb; }
	.verticalLR { writing-mode: vertical-lr; }
	.verticalRL { writing-mode: vertical-rl; }
	</style>

	<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>

	<div class="grid">
	<div class="item horizontalTB">
	<img src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item horizontalTB">
	<img class="verticalLR" src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item horizontalTB">
	<img class="verticalRL" src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item verticalLR">
	<img src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item verticalLR">
	<img class="horizontalTB" src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item verticalLR">
	<img class="verticalRL" src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item verticalRL">
	<img src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item verticalRL">
	<img class="horizontalTB" src="support/100x100-green.png" />
	</div>
	</div>

	<div class="grid">
	<div class="item verticalRL">
	<img class="verticalRL" src="support/100x100-green.png" />
	</div>
	</div>