LayoutTests/fast/css/object-fit/object-fit-img-svg-expected.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
   <head>
     <title>object-fit on SVG images</title>
     <style type="text/css">
       .group > div {
         display: inline-block;
         overflow: hidden;
         height: 72px;
         width: 144px;
         margin: 2px 10px;
         border: 1px solid black;
         background-color: gray;
       }

       .group > * > * { display: block; }
       .group > *:nth-child(1) * { height:100%; width:100%; }
       .group > *:nth-child(2) * { height:100%; margin-left:36px; }
       .group > *:nth-child(3) * { width:100%; margin-top:-36px; }
       .group > *:nth-child(4) * { height:200px; margin-top:-64px; margin-left:-28px; }
       .group > *:nth-child(5) * { height:100%; margin-left:36px; }
       .group > *:nth-child(6) * { height:100%; margin-left:36px; }
       .group > *:nth-child(7) * { height:100%; width:100%; }
     </style>
   </head>
   <body>

     <div class="group">
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
       <div><img src="../resources/circle.svg" type="image/svg+xml"></div>
     </div>

   </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>object-fit on SVG images</title>
	<style type="text/css">
	.group > div {
	display: inline-block;
	overflow: hidden;
	height: 72px;
	width: 144px;
	margin: 2px 10px;
	border: 1px solid black;
	background-color: gray;
	}

	.group > * > * { display: block; }
	.group > :nth-child(1) { height:100%; width:100%; }
	.group > :nth-child(2) { height:100%; margin-left:36px; }
	.group > :nth-child(3) { width:100%; margin-top:-36px; }
	.group > :nth-child(4) { height:200px; margin-top:-64px; margin-left:-28px; }
	.group > :nth-child(5) { height:100%; margin-left:36px; }
	.group > :nth-child(6) { height:100%; margin-left:36px; }
	.group > :nth-child(7) { height:100%; width:100%; }
	</style>
	</head>
	<body>

	<div class="group">
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	<div><img src="../resources/circle.svg" type="image/svg+xml"></div>
	</div>

	</body>
	</html>