chromium/src/third_party/blink/web_tests/external/wpt/css/css-backgrounds/box-shadow-radius-001.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <title>Box Shadow Border Radius (Inset)</title>
 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape">
 <link rel="match" href="box-shadow-radius-001-ref.html">

 <style>
   body > div {
     /* Isolate tests from each other */
     position: relative;
     width: 100px;
     height: 100px;
     float: left;
   }
   div > div {
     position: absolute;
     box-sizing: border-box;
     /* opacity: 0.7; /* uncomment this line for debugging */
   }

   .floor > .test {
     color: silver;
   }
   .trap > .test {
     color: red;
   }
   .test {
     width: 60px;
     height: 60px;
     top: 20px;
     left: 20px;
   }

   .floor > .ref {
     border: 8px red;
     border-style: solid none none solid;
     top: 21px;
     left: 21px;
     width: 59px;
     height: 59px;
   }
   .trap > .ref {
     border: 31px silver;
     border-style: solid none none solid;
     width: 81px;
     height: 81px;
   }

   /* Keep tests consistent by offset - spread = 10
      Trap radius = 32px + shadow radius (round up)
      Floor radius = 8px + shadow radius (round down) */

   .once > .test {
     border-top-left-radius: 10px;
     box-shadow: 20px 20px 0 -10px inset;
     /* shadow radius = 20px */
   }
   .once.floor > .ref {
     border-top-left-radius: 28px;
   }
   .once.trap > .ref {
     border-top-left-radius: 52px;
   }

   .twice > .test {
     border-top-left-radius: 10px;
     box-shadow: 15px 15px 0 -5px inset;
     /* shadow radius = 15 */
   }
   .twice.floor > .ref {
     border-top-left-radius: 23px;
   }
   .twice.trap > .ref {
     border-top-left-radius: 47px;
   }

   .half > .test {
     border-top-left-radius: 8px;
     box-shadow: 26px 26px 0 -16px inset;
     /* shadow radius = 21px */
   }
   .half.floor > .ref {
     border-top-left-radius: 29px;
   }
   .half.trap > .ref {
     border-top-left-radius: 53px;
   }

   .fourth > .test {
     border-top-left-radius: 5px;
     box-shadow: 30px 30px 0 -20px inset;
     /* shadow radius = 14.45 */
   }
   .fourth.floor > .ref {
     border-top-left-radius: 22px;
   }
   .fourth.trap > .ref {
     border-top-left-radius: 47px;
   }

   .eighth > .test {
     border-top-left-radius: 2px;
     box-shadow: 26px 26px 0 -16px inset;
     /* shadow radius = 5.28 */
   }
   .eighth.floor > .ref {
     border-top-left-radius: 12px;
   }
   .eighth.trap > .ref {
     border-top-left-radius: 38px;
   }

 </style>

 <p>Test passes if there is no red.

 <div class="once floor">
   <div class="ref"></div>
   <div class="test"></div>
 </div>
 <div class="once trap">
   <div class="test"></div>
   <div class="ref"></div>
 </div>

 <div class="twice floor">
   <div class="ref"></div>
   <div class="test"></div>
 </div>
 <div class="twice trap">
   <div class="test"></div>
   <div class="ref"></div>
 </div>

 <div class="half floor">
   <div class="ref"></div>
   <div class="test"></div>
 </div>
 <div class="half trap">
   <div class="test"></div>
   <div class="ref"></div>
 </div>

 <div class="fourth floor">
   <div class="ref"></div>
   <div class="test"></div>
 </div>
 <div class="fourth trap">
   <div class="test"></div>
   <div class="ref"></div>
 </div>

 <div class="eighth floor">
   <div class="ref"></div>
   <div class="test"></div>
 </div>
 <div class="eighth trap">
   <div class="test"></div>
   <div class="ref"></div>
 </div>
	<!DOCTYPE html>
	<title>Box Shadow Border Radius (Inset)</title>
	<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
	<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape">
	<link rel="match" href="box-shadow-radius-001-ref.html">

	<style>
	body > div {
	/* Isolate tests from each other */
	position: relative;
	width: 100px;
	height: 100px;
	float: left;
	}
	div > div {
	position: absolute;
	box-sizing: border-box;
	/* opacity: 0.7; /* uncomment this line for debugging */
	}

	.floor > .test {
	color: silver;
	}
	.trap > .test {
	color: red;
	}
	.test {
	width: 60px;
	height: 60px;
	top: 20px;
	left: 20px;
	}

	.floor > .ref {
	border: 8px red;
	border-style: solid none none solid;
	top: 21px;
	left: 21px;
	width: 59px;
	height: 59px;
	}
	.trap > .ref {
	border: 31px silver;
	border-style: solid none none solid;
	width: 81px;
	height: 81px;
	}

	/* Keep tests consistent by offset - spread = 10
	Trap radius = 32px + shadow radius (round up)
	Floor radius = 8px + shadow radius (round down) */

	.once > .test {
	border-top-left-radius: 10px;
	box-shadow: 20px 20px 0 -10px inset;
	/* shadow radius = 20px */
	}
	.once.floor > .ref {
	border-top-left-radius: 28px;
	}
	.once.trap > .ref {
	border-top-left-radius: 52px;
	}

	.twice > .test {
	border-top-left-radius: 10px;
	box-shadow: 15px 15px 0 -5px inset;
	/* shadow radius = 15 */
	}
	.twice.floor > .ref {
	border-top-left-radius: 23px;
	}
	.twice.trap > .ref {
	border-top-left-radius: 47px;
	}

	.half > .test {
	border-top-left-radius: 8px;
	box-shadow: 26px 26px 0 -16px inset;
	/* shadow radius = 21px */
	}
	.half.floor > .ref {
	border-top-left-radius: 29px;
	}
	.half.trap > .ref {
	border-top-left-radius: 53px;
	}

	.fourth > .test {
	border-top-left-radius: 5px;
	box-shadow: 30px 30px 0 -20px inset;
	/* shadow radius = 14.45 */
	}
	.fourth.floor > .ref {
	border-top-left-radius: 22px;
	}
	.fourth.trap > .ref {
	border-top-left-radius: 47px;
	}

	.eighth > .test {
	border-top-left-radius: 2px;
	box-shadow: 26px 26px 0 -16px inset;
	/* shadow radius = 5.28 */
	}
	.eighth.floor > .ref {
	border-top-left-radius: 12px;
	}
	.eighth.trap > .ref {
	border-top-left-radius: 38px;
	}

	</style>

	<p>Test passes if there is no red.

	<div class="once floor">
	<div class="ref"></div>
	<div class="test"></div>
	</div>
	<div class="once trap">
	<div class="test"></div>
	<div class="ref"></div>
	</div>

	<div class="twice floor">
	<div class="ref"></div>
	<div class="test"></div>
	</div>
	<div class="twice trap">
	<div class="test"></div>
	<div class="ref"></div>
	</div>

	<div class="half floor">
	<div class="ref"></div>
	<div class="test"></div>
	</div>
	<div class="half trap">
	<div class="test"></div>
	<div class="ref"></div>
	</div>

	<div class="fourth floor">
	<div class="ref"></div>
	<div class="test"></div>
	</div>
	<div class="fourth trap">
	<div class="test"></div>
	<div class="ref"></div>
	</div>

	<div class="eighth floor">
	<div class="ref"></div>
	<div class="test"></div>
	</div>
	<div class="eighth trap">
	<div class="test"></div>
	<div class="ref"></div>
	</div>