commit 52e9915e160d48e11e52d692131ae68776bb6f6c
parent a0f2c6e676d915d3b1c8ca0724b1a7d990111e5a
Author: Sammy Gill <sammy.gill@apple.com>
Date: Fri, 31 Oct 2025 08:56:24 +0000
Bug 1996941 [wpt PR 55727] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=299885, a=testonly
Automatic update from web-platform-tests
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=299885 (#55727)
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=299885
--
wpt-commits: b8867be7b679d0dc93da119362d8f4512dbe5326
wpt-pr: 55727
Diffstat:
6 files changed, 178 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/border-image-width-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/border-image-width-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to border-width when specified and inherited</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+
+<style>
+body {
+ --scale: 1;
+}
+.box {
+ width: calc(60px * var(--scale));
+ height: calc(60px * var(--scale));
+ border-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100' height='100' fill='red'/%3e%3c/svg%3e") 30;
+ border-image-width: calc(8px * var(--scale));
+ margin: calc(10px * var(--scale));
+}
+.zoom {
+ --scale: 2;
+}
+</style>
+
+<div class="box"></div>
+
+<div class="zoom">
+ <div class="box"></div>
+</div>
+
+<div class="zoom box"></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/border-image-width.html b/testing/web-platform/tests/css/css-viewport/zoom/border-image-width.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to border-image-width when specified and inherited</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="border-image-width-ref.html">
+<style>
+.box {
+ width: 60px;
+ height: 60px;
+ border-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100' height='100' fill='red'/%3e%3c/svg%3e") 30;
+ border-image-width: 8px;
+ margin: 10px;
+}
+.zoom {
+ zoom: 2;
+}
+</style>
+
+<div class="box"></div>
+
+<div class="zoom">
+ <div class="box"></div>
+</div>
+
+<div class="zoom box"></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/border-width-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/border-width-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to border-width when specified and inherited</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+
+<style>
+body {
+ --scale: 1;
+}
+.box {
+ width: calc(60px * var(--scale));
+ height: calc(60px * var(--scale));
+ border: calc(8px * var(--scale)) solid red;
+ margin: calc(10px * var(--scale));
+ display: inline-block;
+ font-size: calc(16px * var(--scale));
+}
+.box-rem {
+ width: calc(60px * var(--scale));
+ height: calc(60px * var(--scale));
+ border: calc(0.5rem * var(--scale)) solid blue;
+ margin: calc(10px * var(--scale));
+ display: inline-block;
+ font-size: calc(1rem * var(--scale));
+}
+.zoom {
+ --scale: 2;
+}
+</style>
+
+<div class="box">unzoomed px</div>
+<div class="box-rem">unzoomed rem</div>
+
+<div class="zoom">
+ <div class="box">zoomed px</div>
+</div>
+
+<div class="zoom box">zoomed inherited px</div>
+<div class="zoom box-rem">zoomed inherited rem</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/border-width.html b/testing/web-platform/tests/css/css-viewport/zoom/border-width.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to border-width when specified and inherited</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="match" href="border-width-ref.html">
+<style>
+.box {
+ width: 60px;
+ height: 60px;
+ border: 8px solid red;
+ margin: 10px;
+ display: inline-block;
+}
+.box-rem {
+ width: 60px;
+ height: 60px;
+ border: 0.5rem solid blue;
+ margin: 10px;
+ display: inline-block;
+}
+.zoom {
+ zoom: 2;
+}
+</style>
+
+<div class="box">unzoomed px</div>
+<div class="box-rem">unzoomed rem</div>
+
+<div class="zoom">
+ <div class="box">zoomed px</div>
+</div>
+
+<div class="zoom box">zoomed inherited px</div>
+<div class="zoom box-rem">zoomed inherited rem</div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/mask-border-width-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/mask-border-width-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<style>
+ body {
+ --scale: 1;
+ }
+
+ .box {
+ width: calc(50px * var(--scale));
+ height: calc(50px * var(--scale));
+ background-color: red;
+ mask-border-slice: 10;
+ mask-border-source: linear-gradient(45deg, pink, blue, white, black, green);
+ mask-border-width: calc(8px * var(--scale));
+ margin: calc(10px * var(--scale));
+ }
+
+ .zoom {
+ --scale: 2;
+ }
+</style>
+
+<div class="box"></div>
+
+<div class="zoom">
+ <div class="box"></div>
+</div>
+
+<div class="zoom box"></div>
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/mask-border-width.html b/testing/web-platform/tests/css/css-viewport/zoom/mask-border-width.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS zoom applies to mask-border-width when specified and inherited</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<link rel="help" href="https://drafts.csswg.org/css-masking-1/#the-mask-border-width">
+<link rel="match" href="mask-border-width-ref.html">
+<style>
+ .box {
+ width: 50px;
+ height: 50px;
+ background-color: red;
+ mask-border-slice: 10;
+ mask-border-source: linear-gradient(45deg, pink, blue, white, black, green);
+ mask-border-width: 8px;
+ margin: 10px;
+ }
+
+ .zoom {
+ zoom: 2;
+ }
+</style>
+
+<div class="box"></div>
+
+<div class="zoom">
+ <div class="box"></div>
+</div>
+
+<div class="zoom box"></div>
