LayoutTests/svg/as-border-image/svg-as-border-image.html - WebKit - Git at Google

 <html>
 <head>
 <style>
     .svg, .image {
       display: inline-block;
       border: 1px solid black;
     }
     .svg > div, .image > div {
         border-width: 30px 30px 30px 30px;
         height: 100px;
         width: 100px;
         margin: 10px;
         outline: 1px solid black;
         display: inline-block;
     }

     .svg > .rr {
         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 repeat repeat;
     }

     .svg > .rs {
         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 repeat stretch;
     }

     .svg > .sr {
         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 stretch repeat;
     }

     .svg > .ss {
         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 stretch stretch;
     }


     .image > .rr {
         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 repeat repeat;
     }

     .image > .rs {
         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 repeat stretch;
     }

     .image > .sr {
         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 stretch repeat;
     }

     .image > .ss {
         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 stretch stretch;
     }
 </style>
 </head>
 <body>

   <!-- Left and right sides should look identical -->
   <div class="svg">
     <h2>SVG border-image</h2>
     <div class="rr"></div>
     <div class="rs"></div>
     <br>
     <div class="sr"></div>
     <div class="ss"></div>
   </div>

   <div class="image">
     <h2>PNG border-image</h2>
     <div class="rr"></div>
     <div class="rs"></div>
     <br>
     <div class="sr"></div>
     <div class="ss"></div>
   </div>

 </body>
 </html>
	<html>
	<head>
	<style>
	.svg, .image {
	display: inline-block;
	border: 1px solid black;
	}
	.svg > div, .image > div {
	border-width: 30px 30px 30px 30px;
	height: 100px;
	width: 100px;
	margin: 10px;
	outline: 1px solid black;
	display: inline-block;
	}

	.svg > .rr {
	-webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 repeat repeat;
	}

	.svg > .rs {
	-webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 repeat stretch;
	}

	.svg > .sr {
	-webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 stretch repeat;
	}

	.svg > .ss {
	-webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 stretch stretch;
	}


	.image > .rr {
	-webkit-border-image: url("resources/tiles.png") 30 30 30 30 repeat repeat;
	}

	.image > .rs {
	-webkit-border-image: url("resources/tiles.png") 30 30 30 30 repeat stretch;
	}

	.image > .sr {
	-webkit-border-image: url("resources/tiles.png") 30 30 30 30 stretch repeat;
	}

	.image > .ss {
	-webkit-border-image: url("resources/tiles.png") 30 30 30 30 stretch stretch;
	}
	</style>
	</head>
	<body>

	<!-- Left and right sides should look identical -->
	<div class="svg">
	<h2>SVG border-image</h2>
	<div class="rr"></div>
	<div class="rs"></div>
	<br>
	<div class="sr"></div>
	<div class="ss"></div>
	</div>

	<div class="image">
	<h2>PNG border-image</h2>
	<div class="rr"></div>
	<div class="rs"></div>
	<br>
	<div class="sr"></div>
	<div class="ss"></div>
	</div>

	</body>
	</html>