Make border radii clip their contents.

Needed for browser.html rounded corners.
This commit is contained in:
Patrick Walton 2016-02-29 14:31:08 -08:00
parent aea8d8959d
commit 28a71c4820
5 changed files with 70 additions and 7 deletions

View file

@ -788,6 +788,18 @@
"url": "/_mozilla/css/border_radius_clip_a.html"
}
],
"css/border_radius_clipping_contents_a.html": [
{
"path": "css/border_radius_clipping_contents_a.html",
"references": [
[
"/_mozilla/css/border_radius_clipping_contents_ref.html",
"=="
]
],
"url": "/_mozilla/css/border_radius_clipping_contents_a.html"
}
],
"css/border_radius_dashed_a.html": [
{
"path": "css/border_radius_dashed_a.html",
@ -6988,6 +7000,18 @@
"url": "/_mozilla/css/border_radius_clip_a.html"
}
],
"css/border_radius_clipping_contents_a.html": [
{
"path": "css/border_radius_clipping_contents_a.html",
"references": [
[
"/_mozilla/css/border_radius_clipping_contents_ref.html",
"=="
]
],
"url": "/_mozilla/css/border_radius_clipping_contents_a.html"
}
],
"css/border_radius_dashed_a.html": [
{
"path": "css/border_radius_dashed_a.html",

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="border_radius_clipping_contents_ref.html">
<style>
section, div {
position: absolute;
top: 0;
left: 0;
width: 128px;
height: 128px;
}
section {
border-radius: 24px;
overflow: hidden;
}
div {
background: gold;
}
</style>
<section><div></div></section>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<style>
section, div {
position: absolute;
top: 0;
left: 0;
width: 128px;
height: 128px;
}
section {
border-radius: 24px;
background: gold;
}
</style>
<section></section>