1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!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">
<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>
|
