border-top-right-radius-values-004.htm (3471B)
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: Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.</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="Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box." /> 8 <style type="text/css"> 9 div 10 { 11 width: 100px; 12 height: 60px; 13 border: 20px solid; 14 } 15 td 16 { 17 width: 150px; 18 height: 120px; 19 } 20 .red 21 { 22 border-color: red; 23 } 24 .pos 25 { 26 margin-top: -100px; 27 } 28 .reference1 29 { 30 border-top-right-radius: 20px 97px; 31 } 32 .test1 33 { 34 border-top-right-radius: 20px 97%; 35 } 36 .reference2 37 { 38 border-top-right-radius: 20px 51px; 39 } 40 .test2 41 { 42 border-top-right-radius: 20px 51%; 43 } 44 .reference3 45 { 46 border-top-right-radius: 20px 25px; 47 } 48 .test3 49 { 50 border-top-right-radius: 20px 25%; 51 } 52 .reference4 53 { 54 border-top-right-radius: 20px 11px; 55 } 56 .test4 57 { 58 border-top-right-radius: 20px 11%; 59 } 60 .reference5 61 { 62 border-top-right-radius: 20px 7px; 63 } 64 .test5 65 { 66 border-top-right-radius: 20px 7%; 67 } 68 .reference6 69 { 70 border-top-right-radius: 20px 5px; 71 } 72 .test6 73 { 74 border-top-right-radius: 20px 5%; 75 } 76 </style> 77 </head> 78 <body> 79 <p>Test passes if the top right corner of each of the boxes is curved and if there is no red visible on the page.</p> 80 <table> 81 <tr> 82 <td> 83 <div class="red reference1"></div> 84 <div class="pos test1"></div> 85 </td> 86 <td> 87 <div class="red reference2"></div> 88 <div class="pos test2"></div> 89 </td> 90 </tr> 91 <tr> 92 <td> 93 <div class="red reference3"></div> 94 <div class="pos test3"></div> 95 </td> 96 <td> 97 <div class="red reference4"></div> 98 <div class="pos test4"></div> 99 </td> 100 </tr> 101 <tr> 102 <td> 103 <div class="red reference5"></div> 104 <div class="pos test5"></div> 105 </td> 106 <td> 107 <div class="red reference6"></div> 108 <div class="pos test6"></div> 109 </td> 110 </tr> 111 </table> 112 </body> 113 </html>