| <!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> |
