Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 21:50:18 +01:00
Code Issues Projects Releases Packages Wiki Activity

Test overflow-clip-margin with border-radius (#35433)

Browse source 
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:
Oriol Brufau 2025-02-12 12:02:57 +01:00 • committed by GitHub
parent b8825ec19b
commit 87069e9f47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 72 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/wpt/meta/MANIFEST.json vendored
View file

@ -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": [ "overflow-clip-margin-invalidation.html": [
"d9c87a34a53f17451b0d3ae8c2071971d1df3a94", "d9c87a34a53f17451b0d3ae8c2071971d1df3a94",
[ [
@ -431763,6 +431776,10 @@
"684de0cf0cbb59fdbe488573b19d9b55974ce93a", "684de0cf0cbb59fdbe488573b19d9b55974ce93a",
[] []
], ],
"overflow-clip-margin-border-radius-ref.html": [
"10301224070288628eb6b61291c08a99dd5eec24",
[]
],
"overflow-clip-margin-invalidation-ref.html": [ "overflow-clip-margin-invalidation-ref.html": [
"1ec2a5ce0a21c8dd578b3fcfde702307e4e2a9a8", "1ec2a5ce0a21c8dd578b3fcfde702307e4e2a9a8",
[] []

20
tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html vendored Normal file
View 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
View 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>