<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>CSS box-shadow Test</title>
    <link href="mailto:weisong4413@126.com" rel="author" title="tmd" />
    <style type="text/css">
		.greenSquare-shadow{
            position: absolute;
			top:50px;
			left:50px;
            width: 100px;
            height: 100px;
			Border-bottom-right-radius: 50px 50px;
			Border-top-left-radius: 50px 50px;
			background-color:rgba(0, 255, 0, 1);
			/*box-shadow: 110px 110px 0px 10px #000000;*/
		}
		.black-shadow{
			position: absolute;
			top: 150px;
			left: 150px;
			width: 120px;
			height: 120px;
			Border-bottom-right-radius: 60px 60px;
			Border-top-left-radius: 60px 60px;
			background-color:black;
        }
        .container {
            position: absolute;
        }
         /* This div should only be visible if the test fails */
        .redSquare {
			position: absolute;
			top: 150px;
			left: 150px;
			width: 120px;
			height: 120px;
			Border-bottom-right-radius: 60px 60px;
			Border-top-left-radius: 60px 60px;
			background-color:red;
        }
    </style>
</head>
<body>
    <p>The test passes if you the green square's black shadow and it completely covers the red square.</p>
    <div class="container">
        <!-- This is the square that should not be visible if the test passes -->
		<div class="redSquare" id="red"></div>
        <!-- This is the square being tested with the shadow -->
		<div class="greenSquare-shadow" id="green"></div>
		<div class="black-shadow" id="black"></div>
    </div>
	<input type="button" onclick="fun_radius()" value="Border radius?" />
	<script>
	var have_radius=true;
	var black=document.getElementById("black");
	var red=document.getElementById("red");
	var green=document.getElementById("green");	
	function fun_radius(){
		if(have_radius){
			red.style.borderBottomRightRadius="0px";
			red.style.borderTopLeftRadius="0px";
			black.style.borderBottomRightRadius="0px";
			black.style.borderTopLeftRadius="0px";
			green.style.borderBottomRightRadius="0px";
			green.style.borderTopLeftRadius="0px";			have_radius=false;
		}else{
			red.style.borderBottomRightRadius="60px";
			red.style.borderTopLeftRadius="60px";
			black.style.borderBottomRightRadius="60px";
			black.style.borderTopLeftRadius="60px";
			green.style.borderBottomRightRadius="50px";
			green.style.borderTopLeftRadius="50px";
			have_radius=true;
		}
	}
	</script>

</body></html>