<!DOCTYPE html>
<html>
<head>
    <title>CSS border-radius Test</title>
    <link rel="author" title="tmd" href="mailto:weisong4413@126.com">
    <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius">
    <link rel="match" href="reference/css-border-radius-ref-002.html">
    <meta name="assert" content="if there is more then one graph and one color">
    <meta name="flag" content="border-radius">
    <style type="text/css">
        .redSquare {
            position: absolute;
			left:50px;
            width: 100px;
            height: 100px;
			border-bottom-left-radius:100% 100%;
			border-top-left-radius:100% 100%;
			border-bottom-right-radius: 100% 100%;
			border-top-right-radius: 100% 100%;
			background-color:rgba(255, 0, 0, 0.5);
        }
		.greenSquare {
            position: absolute;
			left:50px;
            width: 100px;
            height: 100px;
			background-image:url(support/yy.png);
        }
        .container {
            position: absolute;
        }
    </style>
</head>
<body>
    <p>The test passes if there is one graph with one color.</p>
    <div class="container">
        <!-- This is the graph that should not be visible if the test passes -->
		<div id="green" class="greenSquare"></div>
		<!-- This is the square being tested with the radius-->
		<div id="red" class="redSquare">
	</div><br><br><br><br><br>
    <p>you can change the value of all radius to change the graph.</p>
    	Top--- Left- X<input id="rangeTL1" type="range" value="100" onchange="setRadius('TL1')">% Y<input id="rangeTL2" type="range" value="100" onchange="setRadius('TL2')">%
<br>	Top--- Right X<input id="rangeTR1" type="range" value="100" onchange="setRadius('TR1')">% Y<input id="rangeTR2" type="range" value="100" onchange="setRadius('TR2')">%
<br>	Bottom Left- X<input id="rangeBL1" type="range" value="100" onchange="setRadius('BL1')">% Y<input id="rangeBL2" type="range" value="100" onchange="setRadius('BL2')">%
<br>	Bottom Right X<input id="rangeBR1" type="range" value="100" onchange="setRadius('BR1')">% Y<input id="rangeBR2" type="range" value="100" onchange="setRadius('BR2')">%
		<script>
		var red = document.getElementById("red");
		var rangeTL1 = document.getElementById("rangeTL1");
		var rangeTR1 = document.getElementById("rangeTR1");
		var rangeBL1 = document.getElementById("rangeBL1");
		var rangeBR1 = document.getElementById("rangeBR1");
		var rangeTL2 = document.getElementById("rangeTL2");
		var rangeTR2 = document.getElementById("rangeTR2");
		var rangeBL2 = document.getElementById("rangeBL2");
		var rangeBR2 = document.getElementById("rangeBR2");
		function setRadius(str){
			rangeTL1.setAttribute("title",rangeTL1.value);
			rangeTR1.setAttribute("title",rangeTR1.value);
			rangeBL1.setAttribute("title",rangeBL1.value);
			rangeBR1.setAttribute("title",rangeBR1.value);
			rangeTL2.setAttribute("title",rangeTL2.value);
			rangeTR2.setAttribute("title",rangeTR2.value);
			rangeBL2.setAttribute("title",rangeBL2.value);
			rangeBR2.setAttribute("title",rangeBR2.value);
			switch(str){
				case 'TL1':
				case 'TL2':
					red.style.borderTopLeftRadius = rangeTL1.value+'% '+rangeTL2.value+'%';
					break;
				case 'TR1':
				case 'TR2':
					red.style.borderTopRightRadius = rangeTR1.value+'% '+rangeTR2.value+'%';
					break;
				case 'BL1':
				case 'BL2':
					red.style.borderBottomLeftRadius = rangeBL1.value+'% '+rangeBL2.value+'%';
					break;
				case 'BR1':
				case 'BR2':
					red.style.borderBottomRightRadius = rangeBR1.value+'% '+rangeBR2.value+'%';
					break;
			}
		}
		</script>
    </div>
</body>
</html>