css-box-shadow-001.html (2433B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS box-shadow Test</title> 5 <link rel="author" title="tmd" href="mailto:weisong4413@126.com"> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> 7 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius"> 8 <link rel="match" href="reference/css-box-shadow-ref-001.html"> 9 <meta name="fuzzy" content="maxDifference=0-68; totalPixels=0-250"> 10 <style type="text/css"> 11 .greenSquare-shadow{ 12 position: absolute; 13 top:50px; 14 left:50px; 15 width: 100px; 16 height: 100px; 17 Border-bottom-right-radius: 50px 50px; 18 Border-top-left-radius: 50px 50px; 19 background-color:rgba(0, 255, 0, 1); 20 box-shadow: 110px 110px 0px 10px #000000; 21 } 22 .black-shadow{ 23 position: absolute; 24 top: 150px; 25 left: 150px; 26 width: 120px; 27 height: 120px; 28 Border-bottom-right-radius: 60px 60px; 29 Border-top-left-radius: 60px 60px; 30 background-color:black; 31 } 32 .container { 33 position: absolute; 34 } 35 /* This div should only be visible if the test fails */ 36 .redSquare { 37 position: absolute; 38 top: 150px; 39 left: 150px; 40 width: 120px; 41 height: 120px; 42 Border-bottom-right-radius: 60px 60px; 43 Border-top-left-radius: 60px 60px; 44 background-color:red; 45 } 46 </style> 47 </head> 48 <body> 49 <p>The test passes if you the green square's black shadow and it completely covers the red square.</p> 50 <div class="container"> 51 <!-- This is the square that should not be visible if the test passes --> 52 <div id="red" class="redSquare"></div> 53 <!-- This is the square being tested with the shadow --> 54 <div id="green" class="greenSquare-shadow"></div> 55 </div> 56 <input type="button" value="Border radius?" onclick="fun_radius()"> 57 <script> 58 var have_radius=true; 59 var red=document.getElementById("red"); 60 var green=document.getElementById("green"); 61 function fun_radius(){ 62 if(have_radius){ 63 red.style.borderBottomRightRadius="0px"; 64 red.style.borderTopLeftRadius="0px"; 65 green.style.borderBottomRightRadius="0px"; 66 green.style.borderTopLeftRadius="0px"; 67 have_radius=false; 68 }else{ 69 red.style.borderBottomRightRadius="60px"; 70 red.style.borderTopLeftRadius="60px"; 71 green.style.borderBottomRightRadius="50px"; 72 green.style.borderTopLeftRadius="50px"; 73 have_radius=true; 74 } 75 } 76 </script> 77 </body> 78 </html>