LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html - WebKit - Git at Google

 <html>
 <head>
     <style>
         div {
             width: 200px;
             height: 200px;
             float: left;
         }
         #topleft {
             width: 0;
             height: 0;
             border-left: 100px solid rgb(0,0,80);
             border-top: 100px solid rgb(0,0,64);
         }
         #topright {
             width: 0;
             height: 0;
             border-right: 100px solid rgb(0,0,159);
             border-top: 100px solid rgb(0,0,175);
         }
         #bottomleft {
             clear: left;
             width: 0;
             height: 0;
             border-left: 100px solid rgb(0,0,96);
             border-bottom: 100px solid rgb(0,0,112);
         }
         #bottomright {
             width: 0;
             height: 0;
             border-right: 100px solid rgb(0,0,143);
             border-bottom: 100px solid rgb(0,0,128);
         }
         .box {
             position: absolute;
         }
         .x {
             position: absolute;
             -webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
         }
         #x {
             background-color:black;
         }
         .plus {
             position: absolute;
             -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
         }
         #plus {
             background-color:black;
         }

     </style>
 </head>
 <body>
     <div>
         <div class="box">
             <div id="topleft"></div>
             <div id="topright"></div>
             <div id="bottomleft"></div>
             <div id="bottomright"></div>
         </div>
         <div id="x" class="x"></div>
         <div id="plus" class="plus"></div>
     </div>
 </body>
 </html>
	<html>
	<head>
	<style>
	div {
	width: 200px;
	height: 200px;
	float: left;
	}
	#topleft {
	width: 0;
	height: 0;
	border-left: 100px solid rgb(0,0,80);
	border-top: 100px solid rgb(0,0,64);
	}
	#topright {
	width: 0;
	height: 0;
	border-right: 100px solid rgb(0,0,159);
	border-top: 100px solid rgb(0,0,175);
	}
	#bottomleft {
	clear: left;
	width: 0;
	height: 0;
	border-left: 100px solid rgb(0,0,96);
	border-bottom: 100px solid rgb(0,0,112);
	}
	#bottomright {
	width: 0;
	height: 0;
	border-right: 100px solid rgb(0,0,143);
	border-bottom: 100px solid rgb(0,0,128);
	}
	.box {
	position: absolute;
	}
	.x {
	position: absolute;
	-webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
	}
	#x {
	background-color:black;
	}
	.plus {
	position: absolute;
	-webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
	}
	#plus {
	background-color:black;
	}

	</style>
	</head>
	<body>
	<div>
	<div class="box">
	<div id="topleft"></div>
	<div id="topright"></div>
	<div id="bottomleft"></div>
	<div id="bottomright"></div>
	</div>
	<div id="x" class="x"></div>
	<div id="plus" class="plus"></div>
	</div>
	</body>
	</html>