testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-002.htm

   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="flags" content="" />
   8         <meta name="assert" content="When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'." />
   9         <style type="text/css">
  10             div
  11             {
  12                 border: 10px red solid;
  13                 width: 80px;
  14                 height: 80px;
  15             }
  16             #reference1
  17             {
  18                 border-radius: 50px 50px 30px 30px;
  19             }
  20             #test1
  21             {
  22                 margin-top: -100px;
  23                 border-color: black;
  24                 border-radius: 50px 50px 30px 30px;
  25             }
  26             #reference2
  27             {
  28                 border-radius: 0 100px 0 0;
  29             }
  30             #test2
  31             {
  32                 margin-top: -100px;
  33                 border-color: black;
  34                 border-radius: 30px 15000000px 30px 30px;
  35             }
  36             #reference3
  37             {
  38                 border-radius: 0;
  39             }
  40             #test3
  41             {
  42                 margin-top: -100px;
  43                 border-color: black;
  44                 border-radius: 30px -150px 30px 30px;
  45             }
  46             #reference4
  47             {
  48                 width: 1000px;
  49                 height: 500px;
  50                 border-radius: 0.1px 0.1px 0.1px 0.1px;
  51             }
  52             #test4
  53             {
  54                 width: 1000px;
  55                 height: 500px;
  56                 margin-top: -520px;
  57                 border-color: black;
  58                 border-radius: 0.1px 0.1px 0.1px 0.1px;
  59             }
  60         </style>
  61     </head>
  62     <body>
  63         <p>Test passes if there are no more than two rectangles on the page and there is no red visible on the page.</p>
  64         <table>
  65             <tr>
  66                  <td>
  67                     <div id="reference1"></div>
  68                     <div id="test1"></div>
  69                 </td>
  70                 <td>
  71                     <div id="reference2"></div>
  72                     <div id="test2"></div>
  73                 </td>
  74                 <td>
  75                     <div id="reference3"></div>
  76                     <div id="test3"></div>
  77                 </td>
  78            </tr>
  79         </table>
  80         <div id="reference4"></div>
  81         <div id="test4"></div>
  82     </body>
  83 </html>