LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-expected.html - WebKit - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Grid Layout Reference: item [min-|max-]*[width|height] calc() percentages</title>
 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
 <style>
 html,body {
   color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
 }

 .grid {
   display: inline-grid;
   height: 10px;
   width: 10px;
   grid: 1px auto 2px / 3px auto 4px;
   border: solid 1px;
   margin: 0 20px 20px 0;
   place-items: start;
 }
 .item {
   background: cyan;
   grid-area: 2/2;
   height: 30px;
   width: 30px;
 }
 .content {
   height: 30px;
   width: 30px;
 }
 .min {
   height: 9px;
   width: 5px;
 }
 .min:not(.max):not(.size) {
   height: 30px;
   width: 30px;
 }
 .size:not(.min) {
   height: 32px;
   width: 32px;
 }

 .hl  .item { writing-mode: horizontal-tb; direction:ltr; }
 .hr  .item { writing-mode: horizontal-tb; direction:rtl; }
 .vrl .item { writing-mode: vertical-rl; direction:ltr; }
 .vrr .item { writing-mode: vertical-rl; direction:rtl; }
 .vll .item { writing-mode: vertical-lr; direction:ltr; }
 .vlr .item { writing-mode: vertical-lr; direction:rtl; }
 .sll .item { writing-mode: sideways-lr; direction:ltr; }
 .slr .item { writing-mode: sideways-lr; direction:rtl; }

 </style>
 <div class="hl">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>

 <div class="vrl">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>

 <div class="vrr">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>

 <div class="vll">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>

 <div class="vlr">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>

 <div class="slr">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>

 <div class="srl">
 <div class="grid">
   <div class="item max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item max size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min size">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max">
     <div class="content"></div>
   </div>
 </div>
 <div class="grid">
   <div class="item min max size">
     <div class="content"></div>
   </div>
 </div>
 </div>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Grid Layout Reference: item [min-\|max-]*[width\|height] calc() percentages</title>
	<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
	<style>
	html,body {
	color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
	}

	.grid {
	display: inline-grid;
	height: 10px;
	width: 10px;
	grid: 1px auto 2px / 3px auto 4px;
	border: solid 1px;
	margin: 0 20px 20px 0;
	place-items: start;
	}
	.item {
	background: cyan;
	grid-area: 2/2;
	height: 30px;
	width: 30px;
	}
	.content {
	height: 30px;
	width: 30px;
	}
	.min {
	height: 9px;
	width: 5px;
	}
	.min:not(.max):not(.size) {
	height: 30px;
	width: 30px;
	}
	.size:not(.min) {
	height: 32px;
	width: 32px;
	}

	.hl .item { writing-mode: horizontal-tb; direction:ltr; }
	.hr .item { writing-mode: horizontal-tb; direction:rtl; }
	.vrl .item { writing-mode: vertical-rl; direction:ltr; }
	.vrr .item { writing-mode: vertical-rl; direction:rtl; }
	.vll .item { writing-mode: vertical-lr; direction:ltr; }
	.vlr .item { writing-mode: vertical-lr; direction:rtl; }
	.sll .item { writing-mode: sideways-lr; direction:ltr; }
	.slr .item { writing-mode: sideways-lr; direction:rtl; }

	</style>
	<div class="hl">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>

	<div class="vrl">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>

	<div class="vrr">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>

	<div class="vll">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>

	<div class="vlr">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>

	<div class="slr">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>

	<div class="srl">
	<div class="grid">
	<div class="item max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item max size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min size">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max">
	<div class="content"></div>
	</div>
	</div>
	<div class="grid">
	<div class="item min max size">
	<div class="content"></div>
	</div>
	</div>
	</div>