commit 678768d8410a735ca080d03f9f7c4b70171cc5df parent e6cd58d413dd391b5698f74e04aa9e367e3cf192 Author: Sammy Gill <sammy.gill@apple.com> Date: Fri, 31 Oct 2025 08:56:03 +0000 Bug 1996924 [wpt PR 55721] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=301024, a=testonly Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=301024 (#55721) -- wpt-commits: e7b6baf8d238fc4b14e0027b55612ab4e0113826 wpt-pr: 55721 Diffstat:
| A | testing/web-platform/tests/css/css-viewport/zoom/margin.html | | | 71 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | testing/web-platform/tests/css/css-viewport/zoom/reference/margin-ref.html | | | 75 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 146 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/margin.html b/testing/web-platform/tests/css/css-viewport/zoom/margin.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<title>CSS Zoom applies to margins</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/margin-ref.html"> +<style> +#reference-overlapped-red { + background-color: red; + width: 100px; + height: 100px; + z-index: -1; +} +#reference-overlapped-big-red { + background-color: red; + width: 200px; + height: 200px; + z-index: -1; +} + +.container { + padding: 20px; +} +.margin-container { + width: 200px; + margin-left: -50px; +} +.margin-big-container { + width: 400px; + margin-left: -100px; +} +.green-box { + background-color: green; + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + margin: auto; + margin-top: -100px; + justify-self: right; +} +.zoom { + zoom: 2; +} +</style> + +<div class="container"> + <div id=reference-overlapped-red></div> + + <div class="margin-container"> + <div class="green-box">unzoomed</div> + </div> +</div> + +<div class="container"> + <div id=reference-overlapped-big-red></div> + + <div class="margin-big-container"> + <div class="green-box zoom">zoomed</div> + </div> +</div> + +<div class="container zoom"> + <div id=reference-overlapped-red></div> + + <div class="margin-container"> + <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/margin-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/margin-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<title>CSS Zoom applies to margins</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; +} + +#reference-overlapped-red { + background-color: red; + width: calc(100px * var(--scale)); + height: calc(100px * var(--scale)); + z-index: -1; +} +#reference-overlapped-big-red { + background-color: red; + width: calc(200px * var(--scale)); + height: calc(200px * var(--scale)); + z-index: -1; +} + +.container { + padding: calc(20px * var(--scale)); +} +.margin-container { + width: calc(200px * var(--scale)); + margin-left: calc(-50px * var(--scale)); +} +.margin-big-container { + width: 400px; + margin-left: -100px /*calc(-100px * var(--scale))*/; +} +.green-box { + background-color: green; + width: calc(100px * var(--scale)); + height: calc(100px * var(--scale)); + font-size: calc(1rem * var(--scale)); + display: flex; + justify-content: center; + align-items: center; + text-align: center; + margin: auto; + margin-top: calc(-100px * var(--scale)); + justify-self: right; +} +.zoom { + --scale: 2; +} +</style> + +<div class="container"> + <div id=reference-overlapped-red></div> + + <div class="margin-container"> + <div class="green-box">unzoomed</div> + </div> +</div> + +<div class="container"> + <div id=reference-overlapped-big-red></div> + + <div class="margin-big-container"> + <div class="green-box zoom">zoomed</div> + </div> +</div> + +<div class="container zoom"> + <div id=reference-overlapped-red></div> + + <div class="margin-container"> + <div class="green-box">zoomed inherited</div> + </div> +</div> +\ No newline at end of file