Bug 1926578 [wpt PR 48771] - Nested view transitions: adjust for bord…

…er offset, a=testonly Automatic update from web-platform-tests Nested view transitions: adjust for border offset Make sure the border width is only applied once when nesting. Since the parent group receives the border width and the child group computes its target transform based on its original position, by default the top/left border widths are considered twice. Adjust for this when computing the nested group transform. See w3c/csswg-drafts#10585 Bug: 347947051 Change-Id: I2f4c42cd861d41bbd8c99586946745ffcf1a4913 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5946105 Reviewed-by: Jeremy Roman <[email protected]> Reviewed-by: Mike West <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1372661} -- wpt-commits: 67bc1c1811ee7e7013ff5e15ecffe7b520d35ce1 wpt-pr: 48771
jamienicol · Oct 25, 2024 · ecf33fb · ecf33fb
1 parent e44df54
commit ecf33fb
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/...platform/tests/css/css-view-transitions/layered-capture/box-model-capture-nested-ref.html b/...platform/tests/css/css-view-transitions/layered-capture/box-model-capture-nested-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<title>Box model is copied to group style</title>
+<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<style>
+    * {
+        box-sizing:  border-box;
+    }
+
+    body {
+        background: rebeccapurple;
+        margin: 0;
+    }
+
+    div {
+        width: 200px;
+        height: 200px;
+        background: green;
+        border: 10px solid blue;
+        padding: 48px;
+    }
+
+    .child {
+        border: 32px solid yellow;
+    }
+
+    .parent {
+        border-width: 15px;
+        padding-top: 27px;
+        padding-left: 100px;
+        overflow: clip;
+    }
+</style>
+<body>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+</body>
diff --git a/...rm/tests/css/css-view-transitions/layered-capture/box-model-capture-nested.tentative.html b/...rm/tests/css/css-view-transitions/layered-capture/box-model-capture-nested.tentative.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Box model is copied to group style</title>
+<meta name=fuzzy content="maxDifference=0-10; totalPixels=0-200000">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="box-model-capture-nested-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+    * {
+        /* Will add tests for different sizing once the spec is resolved. */
+        box-sizing:  border-box;
+    }
+
+    ::view-transition {
+        background: rebeccapurple;
+    }
+
+    body {
+        margin: 0;
+    }
+
+    div {
+        width: 200px;
+        height: 200px;
+        background: green;
+        border: 10px solid blue;
+    }
+
+
+    .parent {
+        view-transition-name: parent;
+        padding: 48px 48px 48px 100px;
+        overflow: clip;
+    }
+
+    .child {
+        view-transition-name: child;
+        view-transition-group: parent;
+        border: 32px solid yellow;
+        padding: 48px;
+    }
+
+    .vt-new .parent {
+        border-width: 20px;
+        padding: 6px 48px 48px 100px;
+    }
+
+    ::view-transition-group(*) {
+        animation-play-state: paused;
+        animation-timing-function: steps(2, start);
+    }
+
+    ::view-transition-new(*), ::view-transition-old(*) {
+        animation: none;
+    }
+</style>
+<body>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+    <script>
+        document.startViewTransition(() => {
+            document.documentElement.classList.add("vt-new");
+        }).ready.then(() => takeScreenshot());
+    </script>
+</body>