Nested view transitions: adjust for border offset

noamr · chromium-wpt-export-bot · commit 0592f089cd59 · 2024-10-23T06:42:47.000-07:00
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 <jbroman@chromium.org> Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org> Cr-Commit-Position: refs/heads/main@{#1372661}
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>
