css/css-backgrounds/background-size-cover-002.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">

     <title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title>

     <link rel="author" title="Intel" href="http://www.intel.com">
     <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 -->
     <!--
     http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-002-review.html
     -->
     <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property">
     <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

     <meta name="flags" content="image">
     <meta name="assert" content="Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.">
     <style>
         div#ref-overlapped-red
         {
             background-color: red;
             height: 100px;
             width: 100px;
         }

         div#test-overlapping-green
         {
             background-image: url("support/50x50-green.png");
             background-repeat: no-repeat;
             background-size: cover;
             border-right: transparent solid 50px;
             bottom: 100px;
             height: 50px;
             padding: 25px;
             position: relative;
             width: 0px;

             /*
             Background positioning area to cover in this
             test is 50px wide by 100px tall.
             So, the image should be scaled to 100px by 100px.
             */
         }
     </style>
   </head>
   <body>
     <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
     <div id="ref-overlapped-red"></div>
     <div id="test-overlapping-green"></div>
   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title>

	<link rel="author" title="Intel" href="http://www.intel.com">
	<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-08 -->
	<!--
	http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-002-review.html
	-->
	<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" title="3.9. Sizing Images: the 'background-size' property">
	<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

	<meta name="flags" content="image">
	<meta name="assert" content="Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.">
	<style>
	div#ref-overlapped-red
	{
	background-color: red;
	height: 100px;
	width: 100px;
	}

	div#test-overlapping-green
	{
	background-image: url("support/50x50-green.png");
	background-repeat: no-repeat;
	background-size: cover;
	border-right: transparent solid 50px;
	bottom: 100px;
	height: 50px;
	padding: 25px;
	position: relative;
	width: 0px;

	/*
	Background positioning area to cover in this
	test is 50px wide by 100px tall.
	So, the image should be scaled to 100px by 100px.
	*/
	}
	</style>
	</head>
	<body>
	<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
	<div id="ref-overlapped-red"></div>
	<div id="test-overlapping-green"></div>
	</body>
	</html>