1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS border-radius Test</title>
4 <link href="mailto:weisong4413@126.com" rel="author" title="tmd">
5 <link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help">
6 <link href="reference/css-border-radius-ref-002.htm" rel="match">
7 <meta content="if there is more then one graph and one color" name="assert">
8 <meta content="border-radius" name="flag">
9 <style type="text/css">
10 .redSquare {
11 position: absolute;
12 left:50px;
13 width: 100px;
14 height: 100px;
15 border-bottom-left-radius:100% 100%;
16 border-top-left-radius:100% 100%;
17 border-bottom-right-radius: 100% 100%;
18 border-top-right-radius: 100% 100%;
19 background-color:rgba(255, 0, 0, 0.5);
20 }
21 .greenSquare {
22 position: absolute;
23 left:50px;
24 width: 100px;
25 height: 100px;
26 background-image:url(support/yy.png);
27 }
28 .container {
29 position: absolute;
30 }
31 </style>
32 </head>
33 <body>
34 <p>The test passes if there is one graph with one color.</p>
35 <div class="container">
36 <!-- This is the graph that should not be visible if the test passes -->
37 <div class="greenSquare" id="green"></div>
38 <!-- This is the square being tested with the radius-->
39 <div class="redSquare" id="red">
40 </div><br><br><br><br><br>
41 <p>you can change the value of all radius to change the graph.</p>
42 Top--- Left- X<input onchange="setRadius('TL1')" type="range" id="rangeTL1" value="100">% Y<input onchange="setRadius('TL2')" type="range" id="rangeTL2" value="100">%
43 <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">%
44 <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">%
45 <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">%
46 <script>
47 var red = document.getElementById("red");
48 var rangeTL1 = document.getElementById("rangeTL1");
49 var rangeTR1 = document.getElementById("rangeTR1");
50 var rangeBL1 = document.getElementById("rangeBL1");
51 var rangeBR1 = document.getElementById("rangeBR1");
52 var rangeTL2 = document.getElementById("rangeTL2");
53 var rangeTR2 = document.getElementById("rangeTR2");
54 var rangeBL2 = document.getElementById("rangeBL2");
55 var rangeBR2 = document.getElementById("rangeBR2");
56 function setRadius(str){
57 rangeTL1.setAttribute("title",rangeTL1.value);
58 rangeTR1.setAttribute("title",rangeTR1.value);
59 rangeBL1.setAttribute("title",rangeBL1.value);
60 rangeBR1.setAttribute("title",rangeBR1.value);
61 rangeTL2.setAttribute("title",rangeTL2.value);
62 rangeTR2.setAttribute("title",rangeTR2.value);
63 rangeBL2.setAttribute("title",rangeBL2.value);
64 rangeBR2.setAttribute("title",rangeBR2.value);
65 switch(str){
66 case 'TL1':
67 case 'TL2':
68 red.style.borderTopLeftRadius = rangeTL1.value+'% '+rangeTL2.value+'%';
69 break;
70 case 'TR1':
71 case 'TR2':
72 red.style.borderTopRightRadius = rangeTR1.value+'% '+rangeTR2.value+'%';
73 break;
74 case 'BL1':
75 case 'BL2':
76 red.style.borderBottomLeftRadius = rangeBL1.value+'% '+rangeBL2.value+'%';
77 break;
78 case 'BR1':
79 case 'BR2':
80 red.style.borderBottomRightRadius = rangeBR1.value+'% '+rangeBR2.value+'%';
81 break;
82 }
83 }
84 </script>
85 </div>
86
87
88 </body></html>