mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
gfx: Clip the background properly when border-radius
is used.
Improves Reddit, GitHub, etc.
This commit is contained in:
parent
b22b29533a
commit
cc7cacfd5f
12 changed files with 356 additions and 119 deletions
|
@ -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
|
||||
|
|
26
tests/ref/border_radius_clip_a.html
Normal file
26
tests/ref/border_radius_clip_a.html
Normal 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>
|
||||
|
18
tests/ref/border_radius_clip_ref.html
Normal file
18
tests/ref/border_radius_clip_ref.html
Normal 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>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue