commit a0f2c6e676d915d3b1c8ca0724b1a7d990111e5a
parent 6ab90c433e2c1ab464ef54474d12028937468663
Author: Sammy Gill <sammy.gill@apple.com>
Date: Fri, 31 Oct 2025 08:56:20 +0000
Bug 1996938 [wpt PR 55726] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=300577, a=testonly
Automatic update from web-platform-tests
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=300577 (#55726)
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=300577
--
wpt-commits: faf009b57f7bc5b11c1958c1a6939133aabbb5fa
wpt-pr: 55726
Diffstat:
4 files changed, 143 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/box-shadow.html b/testing/web-platform/tests/css/css-viewport/zoom/box-shadow.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to box-shadow when specified and inherited</title>
+<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="reference/box-shadow-ref.html">
+
+<style>
+
+.shadow {
+ box-shadow: 5px 5px 2px black;
+}
+.zoom {
+ zoom: 2;
+}
+</style>
+
+<div class="shadow">unzoomed</div>
+<div class="zoom"><div class="shadow">zoomed</div></div>
+<div class="shadow"><div class="zoom">zoomed inherited</div></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/filters-drop-shadow.html b/testing/web-platform/tests/css/css-viewport/zoom/filters-drop-shadow.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to drop-shadow when specified and inherited</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="reference/filters-drop-shadow-ref.html">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-862" />
+<meta name="assert" content="Check that clipping gets correctly applied on children of a container with a drop-shadow filter in effect."/>
+
+<style>
+.container {
+ filter: drop-shadow(5px 5px 5px black);
+ padding: 20px;
+}
+.circle-mask {
+ border-radius: 80px;
+ overflow: hidden;
+ width: 100px;
+ height: 100px;
+}
+.green-box {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+.zoom {
+ zoom: 2;
+}
+</style>
+<div class="container">
+ <div class="circle-mask">
+ <div class="green-box">unzoomed</div>
+ </div>
+</div>
+<div class="container">
+ <div class="circle-mask zoom">
+ <div class="green-box">zoomed</div>
+ </div>
+</div>
+<div class="container zoom">
+ <div class="circle-mask">
+ <div class="green-box">zoomed inherited</div>
+ </div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/reference/box-shadow-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/box-shadow-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to box-shadow when specified and inherited</title>
+<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+
+<style>
+body {
+ --scale: 1;
+ --shadowScaleOffsetX: 1;
+ --shadowScaleOffsetY: 1;
+ --shadowScaleBlurRadius: 1;
+}
+div {
+ font-size: calc(1rem * var(--scale));
+ box-shadow: calc(5px * var(--shadowScaleOffsetX)) calc(5px * var(--shadowScaleOffsetY)) calc(2px * var(--shadowScaleBlurRadius)) black;
+}
+.zoomFont {
+ --scale: 2;
+}
+.zoomShadow {
+ --shadowScaleOffsetX: 2;
+ --shadowScaleOffsetY: 2;
+ --shadowScaleBlurRadius: 2;
+}
+</style>
+<div>unzoomed</div>
+<div class="zoomFont zoomShadow">zoomed</div>
+<div class="zoomFont">zoomed inherited</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/reference/filters-drop-shadow-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/filters-drop-shadow-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to drop-shadow when specified and inherited</title>
+<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<style>
+body {
+ --scale: 1;
+}
+.container {
+ filter: drop-shadow(calc(5px * var(--scale)) calc(5px * var(--scale)) calc(5px * var(--scale)) black);
+ padding: calc(20px * var(--scale));
+}
+.circle-mask {
+ border-radius: calc(80px * var(--scale));;
+ overflow: hidden;
+ width: calc(100px * var(--scale));
+ height: calc(100px * var(--scale));
+}
+.green-box {
+ width: calc(100px * var(--scale));
+ height: calc(100px * var(--scale));
+ background-color: green;
+ font-size: calc(1rem * var(--scale));
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+.zoom {
+ --scale: 2;
+}
+</style>
+<div class="container">
+ <div class="circle-mask">
+ <div class="green-box">unzoomed</div>
+ </div>
+</div>
+<div class="container">
+ <div class="circle-mask zoom">
+ <div class="green-box">zoomed</div>
+ </div>
+</div>
+<div class="container zoom">
+ <div class="circle-mask">
+ <div class="green-box">zoomed inherited</div>
+ </div>
+</div>
