border-radius-sum-of-radii-002.htm (2660B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Different variations on the value of 'f'</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> 7 <meta name="assert" content="When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'." /> 8 <style type="text/css"> 9 div 10 { 11 border: 10px red solid; 12 width: 80px; 13 height: 80px; 14 } 15 #reference1 16 { 17 border-radius: 50px 50px 30px 30px; 18 } 19 #test1 20 { 21 margin-top: -100px; 22 border-color: black; 23 border-radius: 50px 50px 30px 30px; 24 } 25 #reference2 26 { 27 border-radius: 0 100px 0 0; 28 } 29 #test2 30 { 31 margin-top: -100px; 32 border-color: black; 33 border-radius: 30px 15000000px 30px 30px; 34 } 35 #reference3 36 { 37 border-radius: 0; 38 } 39 #test3 40 { 41 margin-top: -100px; 42 border-color: black; 43 border-radius: 30px -150px 30px 30px; 44 } 45 #reference4 46 { 47 width: 1000px; 48 height: 500px; 49 border-radius: 0.1px 0.1px 0.1px 0.1px; 50 } 51 #test4 52 { 53 width: 1000px; 54 height: 500px; 55 margin-top: -520px; 56 border-color: black; 57 border-radius: 0.1px 0.1px 0.1px 0.1px; 58 } 59 </style> 60 </head> 61 <body> 62 <p>Test passes if there are no more than two rectangles on the page and there is no red visible on the page.</p> 63 <table> 64 <tr> 65 <td> 66 <div id="reference1"></div> 67 <div id="test1"></div> 68 </td> 69 <td> 70 <div id="reference2"></div> 71 <div id="test2"></div> 72 </td> 73 <td> 74 <div id="reference3"></div> 75 <div id="test3"></div> 76 </td> 77 </tr> 78 </table> 79 <div id="reference4"></div> 80 <div id="test4"></div> 81 </body> 82 </html>