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}
web-platform-tests · Oct 23, 2024 · 67bc1c1 · 67bc1c1
1 parent 75db68b
commit 67bc1c1
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/css/css-view-transitions/layered-capture/box-model-capture-nested-ref.html b/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/css/css-view-transitions/layered-capture/box-model-capture-nested.tentative.html b/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>