mirror of
https://github.com/servo/servo.git
synced 2025-06-20 15:18:58 +01:00
88 lines
No EOL
3.5 KiB
HTML
88 lines
No EOL
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<title>CSS border-radius Test</title>
|
|
<link href="mailto:weisong4413@126.com" rel="author" title="tmd">
|
|
<link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help">
|
|
<link href="reference/css-border-radius-ref-002.htm" rel="match">
|
|
<meta content="if there is more then one graph and one color" name="assert">
|
|
<meta content="border-radius" name="flag">
|
|
<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 class="greenSquare" id="green"></div>
|
|
<!-- This is the square being tested with the radius-->
|
|
<div class="redSquare" id="red">
|
|
</div><br><br><br><br><br>
|
|
<p>you can change the value of all radius to change the graph.</p>
|
|
Top--- Left- X<input onchange="setRadius('TL1')" type="range" id="rangeTL1" value="100">% Y<input onchange="setRadius('TL2')" type="range" id="rangeTL2" value="100">%
|
|
<br> Top--- Right X<input onchange="setRadius('TR1')" type="range" id="rangeTR1" value="100">% Y<input onchange="setRadius('TR2')" type="range" id="rangeTR2" value="100">%
|
|
<br> Bottom Left- X<input onchange="setRadius('BL1')" type="range" id="rangeBL1" value="100">% Y<input onchange="setRadius('BL2')" type="range" id="rangeBL2" value="100">%
|
|
<br> Bottom Right X<input onchange="setRadius('BR1')" type="range" id="rangeBR1" value="100">% Y<input onchange="setRadius('BR2')" type="range" id="rangeBR2" value="100">%
|
|
<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> |