Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / borders / border-radius-different-width-001-double.html
blob3380407959909cfa6af620c9fd3ceada3a6a5a5b
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
12 width:200px;
13 height:100px;
14 border-style: double;
15 border-radius: 40px;
16 margin: 10px;
18 #test1
20 border-width:10px 15px 20px 30px;
22 #test2
24 border-width:10px 25px 40px;
26 #test3
28 border-width:10px 25px;
30 #test4
32 border-width:thin medium thick thin;
34 #test5
36 border-width:thin medium thick;
38 #test6
40 border-width:thin thick;
42 #test7
44 border-width:4px 16px 32px 120px;
45 border-radius:80px;
46 height:264px;
47 width:20px;
49 </style>
50 </head>
51 <body>
52 <!-- Test passes if the boxes have rounded corners and show a smooth transition between the thicker and the thinner sides. -->
53 <table>
54 <td>
55 <div id="test1"></div>
56 <div id="test2"></div>
57 <div id="test3"></div>
58 </td>
59 <td>
60 <div id="test4"></div>
61 <div id="test5"></div>
62 <div id="test6"></div>
63 </td>
64 <td>
65 <div id="test7"></div>
66 </td>
67 </table>
68 </body>
69 </html>