view-transition: Fix rendering of inlines with box decorations.

The ink overflow rect computation for inlines misses overflow from box decorations like box-shadow. Fix that by using LinesVisualOverflowBoundingBox() which includes this overflow instead of PhysicalLinesBorderBox() which is limited to border box bounds. Since LinesVisualOverflowBoundingBox() also includes all overflow from child text nodes (from text-shadow for example), we can skip iterating those children as well. This iteration is still needed for text nodes from non-inline LayoutObjects. Bug: 1496876 Change-Id: I211028f1edc7cb4ba7f5e5e6e89e3d119d3d057c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5010350 Auto-Submit: Khushal Sagar <[email protected]> Reviewed-by: Vladimir Levin <[email protected]> Reviewed-by: Chris Harrelson <[email protected]> Commit-Queue: Khushal Sagar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1221792}
Tobias710219 · Nov 8, 2023 · 1a993c9 · 1a993c9
1 parent 46a9955
commit 1a993c9
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 3 deletions.
diff --git a/css/css-view-transitions/block-with-overflowing-text-ref.html b/css/css-view-transitions/block-with-overflowing-text-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: block with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+
+<style>
+#target {
+  text-shadow: red -20px -50px;
+  position: relative;
+  top: 100px;
+  left: 100px;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<div id="target">This text should render correctly</div>
+
diff --git a/css/css-view-transitions/block-with-overflowing-text.html b/css/css-view-transitions/block-with-overflowing-text.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: block with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+<link rel="match" href="block-with-overflowing-text-ref.html">
+<meta name="fuzzy" content="block-with-overflowing-text-ref.html:maxDifference=0-2;totalPixels=0-1200">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  text-shadow: red -20px -50px;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  view-transition-name: target;
+}
+
+.hidden {
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<div id="target">This text should render correctly</div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/span-with-overflowing-text-and-box-decorations-ref.html b/css/css-view-transitions/span-with-overflowing-text-and-box-decorations-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: span with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+
+<style>
+span {
+  text-shadow: red -2px -5px;
+  border: 2px solid black;
+  box-shadow: 3px 3px red, -1em 0 .4em olive;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<span>This text should render correctly</span>
+
diff --git a/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html b/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: span with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+<link rel="match" href="span-with-overflowing-text-and-box-decorations-ref.html">
+<meta name="fuzzy" content="span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+span {
+  text-shadow: red -2px -5px;
+  border: 2px solid black;
+  box-shadow: 3px 3px red, -1em 0 .4em olive;
+  view-transition-name: target;
+}
+
+.hidden {
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<span>This text should render correctly</span>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/css/css-view-transitions/span-with-overflowing-text-ref.html b/css/css-view-transitions/span-with-overflowing-text-ref.html
@@ -6,7 +6,7 @@
 
 <style>
 span {
-  text-shadow: red 2px 5px;
+  text-shadow: red -2px -5px;
 }
 
 body {

diff --git a/css/css-view-transitions/span-with-overflowing-text.html b/css/css-view-transitions/span-with-overflowing-text.html
@@ -4,14 +4,14 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:[email protected]">
 <link rel="match" href="span-with-overflowing-text-ref.html">
-<meta name="fuzzy" content="span-with-overflowing-text-ref.html:maxDifference=0-2;totalPixels=0-1100">
+<meta name="fuzzy" content="span-with-overflowing-text-ref.html:maxDifference=0-3;totalPixels=0-1100">
 
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
 <style>
 span {
-  text-shadow: red 2px 5px;
+  text-shadow: red -2px -5px;
   view-transition-name: target;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ @@
     <style>
     span {
-      text-shadow: red 2px 5px;
+      text-shadow: red -2px -5px;
     }
     body {
@@ Expand Down @@