gfx: Clip the background properly when border-radius is used.

Improves Reddit, GitHub, etc.
This commit is contained in:
Patrick Walton 2014-12-22 11:36:43 -08:00
parent b22b29533a
commit cc7cacfd5f
12 changed files with 356 additions and 119 deletions

View file

@ -221,4 +221,4 @@ fragment=top != ../html/acid2.html acid2_ref.html
== clip_a.html clip_ref.html
!= inset_blackborder.html blackborder_ref.html
!= outset_blackborder.html blackborder_ref.html
== border_radius_clip_a.html border_radius_clip_ref.html

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `border-radius` causes the background to be clipped around the corners. -->
<style>
main {
display: block;
width: 16px;
height: 16px;
background: green;
overflow: hidden;
}
section {
display: block;
width: 256px;
height: 256px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<main><section></section></main>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `border-radius` causes the background to be clipped around the corners. -->
<style>
main {
display: block;
width: 16px;
height: 16px;
background: green;
}
</style>
</head>
<body>
<main></main>
</body>
</html>