View transition layered capture: determine geometry based on box model

Instead of capturing the border offset, we capture the following layout sizes to determine sizing, in addition to the border box: - padding box - content box - The box-sizing property - In layered capture mode, we use the content box size as the reference box for positioning the snapshot, so that padding take effect. - The ::view-transition-image-pair pseudo-element now has position:relative so that it gets affected by padding. It has the content box size. - The width/height of the group is determined by the box-sizing property, and it receives the computed padding. Bug: 375395117 Change-Id: I18fe5126fbfac58b0619043cc5521ea1f280e457 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5953705 Reviewed-by: Khushal Sagar <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Reviewed-by: Arthur Sonzogni <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1379706}
web-platform-tests · Nov 7, 2024 · 07dfce3 · 07dfce3
1 parent 23f125f
commit 07dfce3
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 7 deletions.
diff --git a/css/css-view-transitions/layered-capture/border-offset-ref.tentative.html b/css/css-view-transitions/layered-capture/border-offset-ref.tentative.html
@@ -22,7 +22,7 @@
 
     .parent {
         view-transition-name: parent;
-        border: 3px solid black;
+        border: 10px solid black;
         background: green;
     }
 

diff --git a/css/css-view-transitions/layered-capture/border-offset-with-padding-inline-ref.html b/css/css-view-transitions/layered-capture/border-offset-with-padding-inline-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>Borders should not affect snapshot position</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<style>
+    * {
+        box-sizing: content-box;
+    }
+    html {
+        view-transition-name: none;
+    }
+    body {
+        margin: 0;
+    }
+
+    div {
+        position: absolute;
+    }
+
+    .inline {
+        view-transition-name: parent;
+        border: 10px solid black;
+        background: green;
+        padding: 12px;
+        position: relative;
+        left: 100px;
+        top: 40px;
+    }
+</style>
+<body>
+    <span class="inline">
+        ABC
+    </span>
+</body>
diff --git a/css/css-view-transitions/layered-capture/border-offset-with-padding-inline.tentative.html b/css/css-view-transitions/layered-capture/border-offset-with-padding-inline.tentative.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Borders should not affect snapshot position</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="border-offset-with-padding-inline-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<style>
+    * {
+        box-sizing: content-box;
+    }
+    html {
+        view-transition-name: none;
+    }
+    body {
+        margin: 0;
+    }
+
+    div {
+        position: absolute;
+    }
+
+    .inline {
+        view-transition-name: parent;
+        border: 10px solid black;
+        background: green;
+        padding: 12px;
+        position: relative;
+        left: 100px;
+        top: 40px;
+    }
+
+    ::view-transition-old(*),
+    ::view-transition-new(*),
+    ::view-transition-group(*) {
+        animation-play-state: paused;
+    }
+</style>
+<body>
+    <span class="inline">
+        ABC
+    </span>
+    <script>
+        const transition = document.startViewTransition(() => {
+            document.documentElement.classList.add("vt-new");
+        });
+        transition.ready.then(() => takeScreenshot());
+    </script>
+</body>
diff --git a/css/css-view-transitions/layered-capture/border-offset-with-padding-nested.tentative.html b/css/css-view-transitions/layered-capture/border-offset-with-padding-nested.tentative.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Borders should not affect snapshot position</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="border-offset-ref.tentative.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<style>
+    html {
+        view-transition-name: none;
+    }
+    body {
+        margin: 0;
+    }
+
+    div {
+        position: absolute;
+    }
+
+    .parent {
+        view-transition-name: parent;
+        border: 10px solid black;
+        background: green;
+        padding: 20px;
+        width: 40px;
+        height: 40px;
+        box-sizing: content-box;
+    }
+
+    .child {
+        width: 30px;
+        padding-left: 6px;
+        height: 36px;
+        background: yellow;
+        border: 2px dashed blue;
+        view-transition-group: parent;
+    }
+
+    ::view-transition-old(*),
+    ::view-transition-new(*),
+    ::view-transition-group(*) {
+        animation-play-state: paused;
+    }
+
+    ::view-transition-group(parent) {
+        overflow: clip;
+    }
+</style>
+<body>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+    <script>
+        const transition = document.startViewTransition(() => {
+            document.documentElement.classList.add("vt-new");
+        });
+        transition.ready.then(() => takeScreenshot());
+    </script>
+</body>
diff --git a/css/css-view-transitions/layered-capture/border-offset-with-padding.tentative.html b/css/css-view-transitions/layered-capture/border-offset-with-padding.tentative.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Borders should not affect snapshot position</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<link rel="match" href="border-offset-ref.tentative.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/compute-test.js"></script>
+<style>
+    * {
+        box-sizing: content-box;
+    }
+    html {
+        view-transition-name: none;
+    }
+    body {
+        margin: 0;
+    }
+
+    div {
+        position: absolute;
+    }
+
+    .parent {
+        view-transition-name: parent;
+        border: 10px solid black;
+        background: green;
+        padding: 20px;
+        width: 40px;
+        height: 40px;
+    }
+
+    .child {
+        width: 36px;
+        height: 36px;
+        background: yellow;
+        border: 2px dashed blue;
+    }
+
+    ::view-transition-old(*),
+    ::view-transition-new(*),
+    ::view-transition-group(*) {
+        animation-play-state: paused;
+    }
+
+    ::view-transition-group(parent) {
+        overflow: clip;
+    }
+</style>
+<body>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+    <script>
+        const transition = document.startViewTransition(() => {
+            document.documentElement.classList.add("vt-new");
+        });
+        transition.ready.then(() => takeScreenshot());
+    </script>
+</body>
diff --git a/css/css-view-transitions/layered-capture/border-offset.tentative.html b/css/css-view-transitions/layered-capture/border-offset.tentative.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
 <title>Borders should not affect snapshot position</title>
-<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
 <link rel="match" href="border-offset-ref.tentative.html">
 <script src="/common/reftest-wait.js"></script>
@@ -25,7 +24,7 @@
 
     .parent {
         view-transition-name: parent;
-        border: 3px solid black;
+        border: 10px solid black;
         background: green;
     }
 

diff --git a/...ayered-capture/box-model-capture-ref.html → ...ed-capture/box-model-capture-ref.sub.html b/...ayered-capture/box-model-capture-ref.html → ...ed-capture/box-model-capture-ref.sub.html
@@ -5,8 +5,9 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
 <style>
     * {
-        box-sizing: border-box;
+        box-sizing: {{GET[sizing]}};
     }
+
     body {
         margin: 33px;
         background: pink;

diff --git a/...-capture/box-model-capture.tentative.html → ...ture/box-model-capture.tentative.sub.html b/...-capture/box-model-capture.tentative.html → ...ture/box-model-capture.tentative.sub.html
@@ -3,13 +3,15 @@
 <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-ref.html">
+<link rel="match" href="box-model-capture-ref.sub.html">
+<meta name="variant" content="?sizing=border-box">
+<meta name="variant" content="?sizing=content-box">
 <script src="/common/reftest-wait.js"></script>
 <style>
     * {
-        /* Will add tests for different sizing once the spec is resolved. */
-        box-sizing:  border-box;
+        box-sizing:  {{GET[sizing]}};
     }
+
     html {
         view-transition-name: none;
     }