mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Test overflow-clip-margin
with border-radius
(#35433)
Assert that the resulting shape is the same as a spreading `box-shadow`. Firefox fails this test. Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
parent
b8825ec19b
commit
87069e9f47
3 changed files with 72 additions and 0 deletions
17
tests/wpt/meta/MANIFEST.json
vendored
17
tests/wpt/meta/MANIFEST.json
vendored
|
@ -223590,6 +223590,19 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"overflow-clip-margin-border-radius.html": [
|
||||
"723b7c0e9ee3162bae1fe09feb472f97a18abc00",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/css-overflow/overflow-clip-margin-border-radius-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"overflow-clip-margin-invalidation.html": [
|
||||
"d9c87a34a53f17451b0d3ae8c2071971d1df3a94",
|
||||
[
|
||||
|
@ -431763,6 +431776,10 @@
|
|||
"684de0cf0cbb59fdbe488573b19d9b55974ce93a",
|
||||
[]
|
||||
],
|
||||
"overflow-clip-margin-border-radius-ref.html": [
|
||||
"10301224070288628eb6b61291c08a99dd5eec24",
|
||||
[]
|
||||
],
|
||||
"overflow-clip-margin-invalidation-ref.html": [
|
||||
"1ec2a5ce0a21c8dd578b3fcfde702307e4e2a9a8",
|
||||
[]
|
||||
|
|
20
tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html
vendored
Normal file
20
tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html
vendored
Normal file
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Reference: overflow-clip-margin with border-radius</title>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<style>
|
||||
#outer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
box-shadow: black 0 0 0 100px;
|
||||
margin: 125px;
|
||||
}
|
||||
#inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
35
tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius.html
vendored
Normal file
35
tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius.html
vendored
Normal file
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: overflow-clip-margin with border-radius</title>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#overflow-clip-margin">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#shadow-shape">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">
|
||||
<link rel="match" href="overflow-clip-margin-border-radius-ref.html">
|
||||
<meta name="assert" content="
|
||||
“The overflow clip edge is shaped in the corners exactly the same way
|
||||
as an outer box-shadow with a spread radius of the same cumulative offset
|
||||
from the box’s border edge.”
|
||||
|
||||
Note that the exact shape is under discussion (*), this test only asserts
|
||||
that the shapes are equal.
|
||||
(*) https://github.com/w3c/csswg-drafts/issues/7103
|
||||
">
|
||||
<style>
|
||||
#outer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: clip;
|
||||
border-radius: 25px;
|
||||
overflow-clip-margin: 100px;
|
||||
margin: 125px;
|
||||
}
|
||||
#inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: black 0 0 0 100px;
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue