mirror of
https://github.com/servo/servo.git
synced 2025-06-27 02:23:41 +01:00
88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
<!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>
|