LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
 <link href="resources/grid.css" rel="stylesheet">
 <link href="resources/grid-alignment.css" rel="stylesheet">
 <style>
 .grid {
     grid-template-columns: 20% 50% 30%;
     grid-template-rows: 40%;
 }

 .fixedSize {
     width: 400px;
     height: 400px;
 }

 .calculatedSize {
     width: calc(200px + 20%);
     height: calc(300px + 10%);
 }

 .percentageSize {
     width: 50%;
     height: 50%;
 }

 .absolutelyPositioned {
     position: absolute;
 }

 .indefiniteHeight {
     height: auto;
 }

 .firstRowFirstColumn {
     color: blue;
     background-color: cyan;
 }

 .firstRowSecondColumn {
     color: green;
     background-color: lime;
 }

 .firstRowThirdColumn {
     color: brown;
     background-color: yellow;
     grid-column: 3;
     grid-row: 1;
 }
 </style>
 <script src="../../resources/check-layout.js"></script>
 </head>
 <body onload="checkLayout('.grid');">
     <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
     <div class="unconstrainedContainer">
         <div class="grid">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="indefiniteHeight fit-content">
         <div class="grid">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="unconstrainedContainer">
         <div class="grid fixedSize">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
         </div>
     </div>

     <div class="indefiniteHeight">
         <div class="grid fixedSize">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
         </div>
     </div>

     <div class="fit-content indefiniteHeight">
         <div class="grid calculatedSize justifyContentStart">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="unconstrainedContainer">
         <div class="grid calculatedSize">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
         </div>
     </div>

     <div class="fit-content indefiniteHeight">
         <div class="grid percentageSize">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="unconstrainedContainer">
         <div class="grid percentageSize">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
         </div>
     </div>

     <div class="fit-content indefiniteHeight">
         <div class="grid absolutelyPositioned">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="unconstrainedContainer">
         <div class="grid absolutelyPositioned">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="fit-content indefiniteHeight">
         <div class="grid fit-content indefiniteHeight">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
         </div>
     </div>

     <div class="unconstrainedContainer">
         <div class="grid fit-content">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
         </div>
     </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
	<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
	<link href="resources/grid.css" rel="stylesheet">
	<link href="resources/grid-alignment.css" rel="stylesheet">
	<style>
	.grid {
	grid-template-columns: 20% 50% 30%;
	grid-template-rows: 40%;
	}

	.fixedSize {
	width: 400px;
	height: 400px;
	}

	.calculatedSize {
	width: calc(200px + 20%);
	height: calc(300px + 10%);
	}

	.percentageSize {
	width: 50%;
	height: 50%;
	}

	.absolutelyPositioned {
	position: absolute;
	}

	.indefiniteHeight {
	height: auto;
	}

	.firstRowFirstColumn {
	color: blue;
	background-color: cyan;
	}

	.firstRowSecondColumn {
	color: green;
	background-color: lime;
	}

	.firstRowThirdColumn {
	color: brown;
	background-color: yellow;
	grid-column: 3;
	grid-row: 1;
	}
	</style>
	<script src="../../resources/check-layout.js"></script>
	</head>
	<body onload="checkLayout('.grid');">
	<p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
	<div class="unconstrainedContainer">
	<div class="grid">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="indefiniteHeight fit-content">
	<div class="grid">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid fixedSize">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
	</div>
	</div>

	<div class="indefiniteHeight">
	<div class="grid fixedSize">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
	</div>
	</div>

	<div class="fit-content indefiniteHeight">
	<div class="grid calculatedSize justifyContentStart">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid calculatedSize">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
	</div>
	</div>

	<div class="fit-content indefiniteHeight">
	<div class="grid percentageSize">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid percentageSize">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
	</div>
	</div>

	<div class="fit-content indefiniteHeight">
	<div class="grid absolutelyPositioned">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid absolutelyPositioned">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="fit-content indefiniteHeight">
	<div class="grid fit-content indefiniteHeight">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
	</div>
	</div>

	<div class="unconstrainedContainer">
	<div class="grid fit-content">
	<div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
	<div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
	<div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
	</div>
	</div>

	</body>
	</html>