third_party/WebKit/LayoutTests/fast/borders/border-radius-different-width-001.html

   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: Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.</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 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides." />
   9         <style type="text/css">
  10             div
  11             {
  12                 width:200px;
  13                 height:100px;
  14                 border-style:solid;
  15                 border-radius: 40px;
  16                 margin: 10px;
  17             }
  18             #test1
  19             {
  20                 border-width:10px 15px 20px 30px;
  21             }
  22             #test2
  23             {
  24                 border-width:10px 25px 40px;
  25             }
  26             #test3
  27             {
  28                 border-width:10px 25px;
  29             }
  30             #test4
  31             {
  32                 border-width:thin medium thick thin;
  33             }
  34             #test5
  35             {
  36                 border-width:thin medium thick;
  37             }
  38             #test6
  39             {
  40                 border-width:thin thick;
  41             }
  42             #test7
  43             {
  44                 border-style:solid;
  45                 border-width:4px 16px 32px 120px;
  46                 border-radius:80px;
  47                 height:264px;
  48                 width:20px;
  49             }
  50         </style>
  51     </head>
  52     <body>
  53         <!-- Test passes if the boxes have rounded corners and show a smooth transition between the thicker and the thinner sides. -->
  54         <table>
  55             <td>
  56                 <div id="test1"></div>
  57                 <div id="test2"></div>
  58                 <div id="test3"></div>
  59             </td>
  60             <td>
  61                 <div id="test4"></div>
  62                 <div id="test5"></div>
  63                 <div id="test6"></div>
  64             </td>
  65             <td>
  66                 <div id="test7"></div>
  67             </td>
  68         </table>
  69     </body>
  70 </html>