Revision 2844c3745a2e52eebd3620ea0a4ab9991ce17d5c authored by James Graham on 15 April 2018, 09:22:37 UTC, committed by moz-wptsync-bot on 15 April 2018, 09:22:37 UTC
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1452952 gecko-commit: 55b99481fab156381335b6887fca26b6a8f0c0b3 gecko-integration-branch: mozilla-inbound gecko-reviewers: ato
1 parent fd2badf
css-border-radius-002.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>
Computing file changes ...
