LayoutTests/svg/css/svg-css-different-intrinsic-sizes.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
   <style>
     div {
       background: yellow;
       width: 75px;
       height: 75px;
     }
     svg {
       background: lime;
     }
     svg.intrinsic-size {
       width: 50px;
       height: 50px;
     }
     rect {
       fill: red;
     }
   </style>
 </head>
 <body>
   <div>
     <svg class='intrinsic-size' width='100' height='100'>
   	  <rect width='50%' height='50%'/>
     </svg>
   </div>
   <div>
     <svg width='100' height='100'>
       <style>
         svg {
           width: 50px;
           height: 50px;
         }
       </style>
   	  <rect width='50%' height='50%'/>
     </svg>
   </div>
   <div>
     <svg class='intrinsic-size' width='100' height='100'>
   	  <svg viewbox='0 0 100 100'>
   	    <rect width='50%' height='50%'/>
   	  </svg>
     </svg>
   </div>
   <div>
     <svg class='intrinsic-size' width='100' height='100'>
   	  <svg class='intrinsic-size' viewbox='0 0 100 100'>
   	    <rect width='50' height='50'/>
   	  </svg>
     </svg>
   </div>
   <div>
     <svg class='intrinsic-size' width='100' height='100'>
   	  <svg class='intrinsic-size' width='50%' height='50%' viewbox='0 0 100 100'>
   	    <rect width='100%' height='100%'/>
   	  </svg>
     </svg>
   </div>
   <div>
     <svg class='intrinsic-size' width='100' height='100'>
   	  <svg width='50%' height='50%' viewbox='0 0 100 100'>
   	    <rect width='100' height='100'/>
   	  </svg>
     </svg>
   </div>
   <div>
     <svg width='100' height='100'>
       <style>
         svg {
           width: 50px;
           height: 50px;
         }
       </style>
   	  <svg width='50%' height='50%' viewbox='0 0 100 100'>
   	    <rect width='100' height='100'/>
   	  </svg>
     </svg>
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div {
	background: yellow;
	width: 75px;
	height: 75px;
	}
	svg {
	background: lime;
	}
	svg.intrinsic-size {
	width: 50px;
	height: 50px;
	}
	rect {
	fill: red;
	}
	</style>
	</head>
	<body>
	<div>
	<svg class='intrinsic-size' width='100' height='100'>
	<rect width='50%' height='50%'/>
	</svg>
	</div>
	<div>
	<svg width='100' height='100'>
	<style>
	svg {
	width: 50px;
	height: 50px;
	}
	</style>
	<rect width='50%' height='50%'/>
	</svg>
	</div>
	<div>
	<svg class='intrinsic-size' width='100' height='100'>
	<svg viewbox='0 0 100 100'>
	<rect width='50%' height='50%'/>
	</svg>
	</svg>
	</div>
	<div>
	<svg class='intrinsic-size' width='100' height='100'>
	<svg class='intrinsic-size' viewbox='0 0 100 100'>
	<rect width='50' height='50'/>
	</svg>
	</svg>
	</div>
	<div>
	<svg class='intrinsic-size' width='100' height='100'>
	<svg class='intrinsic-size' width='50%' height='50%' viewbox='0 0 100 100'>
	<rect width='100%' height='100%'/>
	</svg>
	</svg>
	</div>
	<div>
	<svg class='intrinsic-size' width='100' height='100'>
	<svg width='50%' height='50%' viewbox='0 0 100 100'>
	<rect width='100' height='100'/>
	</svg>
	</svg>
	</div>
	<div>
	<svg width='100' height='100'>
	<style>
	svg {
	width: 50px;
	height: 50px;
	}
	</style>
	<svg width='50%' height='50%' viewbox='0 0 100 100'>
	<rect width='100' height='100'/>
	</svg>
	</svg>
	</div>
	</body>
	</html>