diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm')
| -rw-r--r-- | testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm b/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm new file mode 100644 index 0000000000..e829a5a574 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/border-radius-sum-of-radii-001.htm @@ -0,0 +1,142 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Different variations on the sum of border-radius for adjacent corners</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> + <meta name="assert" content="If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap." /> + <style type="text/css"> + div + { + border: 10px red solid; + width: 80px; + height: 80px; + } + #reference1 + { + border-radius: 30px 75px 15px 15px; + } + #test1 + { + margin-top: -100px; + border-color: black; + border-radius: 60px 150px 30px 30px; + } + #reference2 + { + border-radius: 0 100px 0 20px; + } + #test2 + { + margin-top: -100px; + border-color: black; + border-radius: 0 150px 0 30px; + } + #reference3 + { + border-radius: 100px 0 20px 0; + } + #test3 + { + margin-top: -100px; + border-color: black; + border-radius: 150px 0 30px 0; + } + #reference4 + { + border-radius: 41.67px 58.31px 25px 25px; + } + #test4 + { + margin-top: -100px; + border-color: black; + border-radius: 50px 70px 30px 30px; + } + #reference5 + { + border-radius: 50px 50px 10px 10px; + } + #test5 + { + margin-top: -100px; + border-color: black; + border-radius: 150px 150px 30px 30px; + } + #reference6 + { + border-radius: 25px 41.67px 58.31px 25px; + } + #test6 + { + margin-top: -100px; + border-color: black; + border-radius: 30px 50px 70px 30px; + } + #reference7 + { + border-radius: 25px 25px 41.67px 58.31px; + } + #test7 + { + margin-top: -100px; + border-color: black; + border-radius: 30px 30px 50px 70px; + } + #reference8 + { + border-radius: 58.31px 25px 25px 41.67px; + } + #test8 + { + margin-top: -100px; + border-color: black; + border-radius: 70px 30px 30px 50px; + } + </style> + </head> + <body> + <p>Test passes if there are no squares on the page and there is no red visible on the page.</p> + <table> + <tr> + <td> + <div id="reference1"></div> + <div id="test1"></div> + </td> + <td> + <div id="reference2"></div> + <div id="test2"></div> + </td> + </tr> + <tr> + <td> + <div id="reference3"></div> + <div id="test3"></div> + </td> + <td> + <div id="reference4"></div> + <div id="test4"></div> + </td> + </tr> + <tr> + <td> + <div id="reference5"></div> + <div id="test5"></div> + </td> + <td> + <div id="reference6"></div> + <div id="test6"></div> + </td> + </tr> + <tr> + <td> + <div id="reference7"></div> + <div id="test7"></div> + </td> + <td> + <div id="reference8"></div> + <div id="test8"></div> + </td> + </tr> + </table> + </body> +</html> |