chromium/src/third_party/blink/web_tests/external/wpt/css/mediaqueries/support/min-width-tables-001-iframe.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>iframe containing the meat of the test</title>
     <style>
 body {
     margin: 0;
     overflow: hidden;
 }
 /* green div that should cover the red divs */
 #green {
     position: absolute;
     left: 0;
     top: 0;
     background-color: green;
     width: 100%;
     height: 600px;
 }
 .spacer {
     height: 98px;
     width: 20px;
 }
 .item {
     background-color: red;
     display: block;/* property under test */
     /* border to aid understanding of boundaries between items */
     border-style: solid;
     border-width: 1px;
     border-color: red;/* Note: if you're trying to debug this, use a different color here */
 }
 /* 100px = 10*(1 + 8 + 1) */
 @media (min-width: 100px) {
     #green {
         width: 100px;
         height: 100px;/* = 1 + 98 + 1 */
     }
     .item {
         display: table-cell;/* property and value under test */
     }
 }
     </style>
 </head>
 <body>
     <div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
         <div class="item"><div class="spacer"></div></div>
     </div>
     <div id="green"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>iframe containing the meat of the test</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}
	/* green div that should cover the red divs */
	#green {
	position: absolute;
	left: 0;
	top: 0;
	background-color: green;
	width: 100%;
	height: 600px;
	}
	.spacer {
	height: 98px;
	width: 20px;
	}
	.item {
	background-color: red;
	display: block;/* property under test */
	/* border to aid understanding of boundaries between items */
	border-style: solid;
	border-width: 1px;
	border-color: red;/* Note: if you're trying to debug this, use a different color here */
	}
	/* 100px = 10(1 + 8 + 1) /
	@media (min-width: 100px) {
	#green {
	width: 100px;
	height: 100px;/* = 1 + 98 + 1 */
	}
	.item {
	display: table-cell;/* property and value under test */
	}
	}
	</style>
	</head>
	<body>
	<div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	<div class="item"><div class="spacer"></div></div>
	</div>
	<div id="green"></div>
	</body>
	</html>