LayoutTests/css2.1/20110323/background-intrinsic-005.htm - WebKit - Git at Google

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
   <link rel="reference" href="background-intrinsic-ref.xht">
   <title>CSS Test: Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)</title>
   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
   <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
   <meta name="flags" content="may svg">
   <meta name="assert" content="A background image with only an intrinsic ratio     covers largest rectangle at that ratio that exceeds neither the height nor     width of the background positioning area.">
   <style type="text/css">
     /* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
     div {
       position: relative;
     }
     .cover, .limit {
       width: 120px;
       height: 120px;
       margin: 0.5em;
       background: green; /* Used to match reference; remove for debugging. */
     }
     .control {
       position: absolute;
       top: 10px; bottom: 10px;
       left: 10px; right: 30px;
     }
     .cover .control {
       background: red;
     }
     .limit .control {
       background: green;
     }
     .test {
       /* 80x100 bgpos area */
       height: 80px;
       width: 60px;
       padding: 10px;
       border: 10px solid transparent;
     }

     /* Test */
     .cover .test {
       background: no-repeat url(resources/green-intrinsic-ratio-landscape.svg);
     }
     .limit .test {
       background: no-repeat url(resources/red-intrinsic-ratio-landscape.svg);
     }
     .cover .control {
       height: 53px;
     }
     .limit .control {
       height: 54px;
     }
   </style>
  </head>
  <body>
   <p>There must be two green boxes below and no red.</p>

   <div class="cover">
     <div class="control"></div>
     <div class="test"></div>
   </div>

   <div class="limit">
     <div class="test"></div>
     <div class="control"></div>
   </div>

  </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<link rel="reference" href="background-intrinsic-ref.xht">
	<title>CSS Test: Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)</title>
	<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
	<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
	<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
	<meta name="flags" content="may svg">
	<meta name="assert" content="A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.">
	<style type="text/css">
	/* Setup. Use 5:6 ratio because it's weird and unlikely to be hard-coded anywhere. */
	div {
	position: relative;
	}
	.cover, .limit {
	width: 120px;
	height: 120px;
	margin: 0.5em;
	background: green; /* Used to match reference; remove for debugging. */
	}
	.control {
	position: absolute;
	top: 10px; bottom: 10px;
	left: 10px; right: 30px;
	}
	.cover .control {
	background: red;
	}
	.limit .control {
	background: green;
	}
	.test {
	/* 80x100 bgpos area */
	height: 80px;
	width: 60px;
	padding: 10px;
	border: 10px solid transparent;
	}

	/* Test */
	.cover .test {
	background: no-repeat url(resources/green-intrinsic-ratio-landscape.svg);
	}
	.limit .test {
	background: no-repeat url(resources/red-intrinsic-ratio-landscape.svg);
	}
	.cover .control {
	height: 53px;
	}
	.limit .control {
	height: 54px;
	}
	</style>
	</head>
	<body>
	<p>There must be two green boxes below and no red.</p>

	<div class="cover">
	<div class="control"></div>
	<div class="test"></div>
	</div>

	<div class="limit">
	<div class="test"></div>
	<div class="control"></div>
	</div>

	</body>
	</html>