css/css-flexbox/flex-shrink-003.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Flexbox Test: flex-shrink - 1(initial value)</title>
 <link rel="author" title="Intel" href="http://www.intel.com">
 <link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
 <link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
 <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
 <meta name="assert" content="The flex-shrink property initial value is 1">
 <style>
   #container {
     background-color: red;
     display: flex;
     height: 100px;
     width: 100px;
   }
   #container div {
     height: 100px;
     width: 100px;
   }
   #test2 {
     background-color: green;
     flex-shrink: 4;
   }
   #cover {
     background-color: green;
     height: 100px;
     margin-top: -100px;
     width: 80px;
   }
 </style>
 <body>
   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
   <div id="container">
     <div id="test1"></div>
     <div id="test2"></div>
   </div>
   <div id="cover"></div>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CSS Flexbox Test: flex-shrink - 1(initial value)</title>
	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
	<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
	<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
	<meta name="assert" content="The flex-shrink property initial value is 1">
	<style>
	#container {
	background-color: red;
	display: flex;
	height: 100px;
	width: 100px;
	}
	#container div {
	height: 100px;
	width: 100px;
	}
	#test2 {
	background-color: green;
	flex-shrink: 4;
	}
	#cover {
	background-color: green;
	height: 100px;
	margin-top: -100px;
	width: 80px;
	}
	</style>
	<body>
	<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
	<div id="container">
	<div id="test1"></div>
	<div id="test2"></div>
	</div>
	<div id="cover"></div>
	</body>