-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
VT: Pixel snapping ink overflow rect
This patch adds pixel snapping to the overflow rect sometimes. The ideal solution would know whether pixel snapping happens in all cases, but it's really complicated to know that, since we need to figure out which element caused the overflow edge and whether that element was pixel snapped and at what offset. For now, handle common cases. R=khushalsagar@chromium.org Bug: 1432868 Change-Id: I4d5d52bba22bf7b5a5412152accd524fedbfce11 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4481094 Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1137954}
- Loading branch information
1 parent
6508033
commit e088e34
Showing
9 changed files
with
318 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: fractional box -- new content</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <link rel="match" href="fractional-box-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .box { | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| position: relative; | ||
| left: 0.4px; | ||
| } | ||
| html::view-transition-group(*) { animation-duration: 300s; } | ||
| html::view-transition-new(*) { animation: unset; opacity: 1; } | ||
| html::view-transition-old(*) { animation: unset; opacity: 0; } | ||
| html::view-transition-group(root) { animation: unset; opacity: 0; } | ||
| html::view-transition { background: lightpink; } | ||
| </style> | ||
| <div class="box" style="view-transition-name: one"></div> | ||
| <div class="box shift" style="view-transition-name: two"></div> | ||
| <script> | ||
| failIfNot(document.startViewTransition, "Missing document.startViewTransition"); | ||
|
|
||
| async function runTest() { | ||
| document.startViewTransition().ready.then(takeScreenshot); | ||
| } | ||
| onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); | ||
| </script> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: fractional box -- old content</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <link rel="match" href="fractional-box-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .box { | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| position: relative; | ||
| left: 0.4px; | ||
| } | ||
| html::view-transition-group(*) { animation-duration: 300s; } | ||
| html::view-transition-new(*) { animation: unset; opacity: 0; } | ||
| html::view-transition-old(*) { animation: unset; opacity: 1; } | ||
| html::view-transition-group(root) { animation: unset; opacity: 0; } | ||
| html::view-transition { background: lightpink; } | ||
| </style> | ||
| <div class="box" style="view-transition-name: one"></div> | ||
| <div class="box shift" style="view-transition-name: two"></div> | ||
| <script> | ||
| failIfNot(document.startViewTransition, "Missing document.startViewTransition"); | ||
|
|
||
| async function runTest() { | ||
| document.startViewTransition().ready.then(takeScreenshot); | ||
| } | ||
| onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); | ||
| </script> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <title>View transitions: fractional box -- reference</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <style> | ||
| .box { | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| position: relative; | ||
| left: 0.4px; | ||
| } | ||
| body { background: lightpink } | ||
| </style> | ||
| <div class="box"></div> | ||
| <div class="box shift"></div> |
52 changes: 52 additions & 0 deletions
52
css/css-view-transitions/fractional-box-with-overflow-children-new.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: fractional box with overflow children -- new content</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <link rel="match" href="fractional-box-with-overflow-children-ref.html"> | ||
| <!-- subpixel differences are ok in this test (in highdpi), but channel difference | ||
| should not be perceptible --> | ||
| <meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .box { | ||
| position: relative; | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| left: 0.4px; | ||
| } | ||
| .child1 { | ||
| position: absolute; | ||
| left: -2px; | ||
| width: 110px; | ||
| height: 25px; | ||
| background: darkgreen; | ||
| } | ||
| .child2 { | ||
| position: absolute; | ||
| top: -3px; | ||
| width: 50px; | ||
| height: 55px; | ||
| background: darkgreen; | ||
| } | ||
| html::view-transition-group(*) { animation-duration: 300s; } | ||
| html::view-transition-new(*) { animation: unset; opacity: 1; } | ||
| html::view-transition-old(*) { animation: unset; opacity: 0; } | ||
| html::view-transition-group(root) { animation: unset; opacity: 0; } | ||
| html::view-transition { background: lightpink; } | ||
| </style> | ||
| <div class="box" style="view-transition-name: one"><div class="child1"></div><div class="child2"></div></div> | ||
| <div class="box shift" style="view-transition-name: two"><div class="child1"></div><div class="child2"></div></div> | ||
| <script> | ||
| failIfNot(document.startViewTransition, "Missing document.startViewTransition"); | ||
|
|
||
| async function runTest() { | ||
| document.startViewTransition().ready.then(takeScreenshot); | ||
| } | ||
| onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); | ||
| </script> | ||
|
|
52 changes: 52 additions & 0 deletions
52
css/css-view-transitions/fractional-box-with-overflow-children-old.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: fractional box with overflow children -- old content</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <link rel="match" href="fractional-box-with-overflow-children-ref.html"> | ||
| <!-- subpixel differences are ok in this test (in highdpi), but channel difference | ||
| should not be perceptible --> | ||
| <meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .box { | ||
| position: relative; | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| left: 0.4px; | ||
| } | ||
| .child1 { | ||
| position: absolute; | ||
| left: -2px; | ||
| width: 110px; | ||
| height: 25px; | ||
| background: darkgreen; | ||
| } | ||
| .child2 { | ||
| position: absolute; | ||
| top: -3px; | ||
| width: 50px; | ||
| height: 55px; | ||
| background: darkgreen; | ||
| } | ||
| html::view-transition-group(*) { animation-duration: 300s; } | ||
| html::view-transition-new(*) { animation: unset; opacity: 0; } | ||
| html::view-transition-old(*) { animation: unset; opacity: 1; } | ||
| html::view-transition-group(root) { animation: unset; opacity: 0; } | ||
| html::view-transition { background: lightpink; } | ||
| </style> | ||
| <div class="box" style="view-transition-name: one"><div class="child1"></div><div class="child2"></div></div> | ||
| <div class="box shift" style="view-transition-name: two"><div class="child1"></div><div class="child2"></div></div> | ||
| <script> | ||
| failIfNot(document.startViewTransition, "Missing document.startViewTransition"); | ||
|
|
||
| async function runTest() { | ||
| document.startViewTransition().ready.then(takeScreenshot); | ||
| } | ||
| onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); | ||
| </script> | ||
|
|
33 changes: 33 additions & 0 deletions
33
css/css-view-transitions/fractional-box-with-overflow-children-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <title>View transitions: fractional box with overflow children-- reference</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <style> | ||
| .box { | ||
| position: relative; | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| left: 0.4px; | ||
| } | ||
| .child1 { | ||
| position: absolute; | ||
| left: -2px; | ||
| width: 110px; | ||
| height: 25px; | ||
| background: darkgreen; | ||
| } | ||
| .child2 { | ||
| position: absolute; | ||
| top: -3px; | ||
| width: 50px; | ||
| height: 55px; | ||
| background: darkgreen; | ||
| } | ||
| body { background: lightpink } | ||
| </style> | ||
| <div class="box"><div class="child1"></div><div class="child2"></div></div> | ||
| <div class="box shift"><div class="child1"></div><div class="child2"></div></div> |
36 changes: 36 additions & 0 deletions
36
css/css-view-transitions/fractional-box-with-shadow-new.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: fractional box with shadow -- new content</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <link rel="match" href="fractional-box-with-shadow-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .box { | ||
| box-shadow: -2px -3px 0 7px darkgreen; | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| position: relative; | ||
| left: 0.4px; | ||
| } | ||
| html::view-transition-group(*) { animation-duration: 300s; } | ||
| html::view-transition-new(*) { animation: unset; opacity: 1; } | ||
| html::view-transition-old(*) { animation: unset; opacity: 0; } | ||
| html::view-transition-group(root) { animation: unset; opacity: 0; } | ||
| html::view-transition { background: lightpink; } | ||
| </style> | ||
| <div class="box" style="view-transition-name: one"></div> | ||
| <div class="box shift" style="view-transition-name: two"></div> | ||
| <script> | ||
| failIfNot(document.startViewTransition, "Missing document.startViewTransition"); | ||
|
|
||
| async function runTest() { | ||
| document.startViewTransition().ready.then(takeScreenshot); | ||
| } | ||
| onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); | ||
| </script> | ||
|
|
36 changes: 36 additions & 0 deletions
36
css/css-view-transitions/fractional-box-with-shadow-old.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: fractional box with shadow -- old content</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <link rel="match" href="fractional-box-with-shadow-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .box { | ||
| box-shadow: -2px -3px 0 7px darkgreen; | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| position: relative; | ||
| left: 0.4px; | ||
| } | ||
| html::view-transition-group(*) { animation-duration: 300s; } | ||
| html::view-transition-new(*) { animation: unset; opacity: 0; } | ||
| html::view-transition-old(*) { animation: unset; opacity: 1; } | ||
| html::view-transition-group(root) { animation: unset; opacity: 0; } | ||
| html::view-transition { background: lightpink; } | ||
| </style> | ||
| <div class="box" style="view-transition-name: one"></div> | ||
| <div class="box shift" style="view-transition-name: two"></div> | ||
| <script> | ||
| failIfNot(document.startViewTransition, "Missing document.startViewTransition"); | ||
|
|
||
| async function runTest() { | ||
| document.startViewTransition().ready.then(takeScreenshot); | ||
| } | ||
| onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); | ||
| </script> | ||
|
|
20 changes: 20 additions & 0 deletions
20
css/css-view-transitions/fractional-box-with-shadow-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <title>View transitions: fractional box with shadow -- reference</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <style> | ||
| .box { | ||
| box-shadow: -2px -3px 0 7px darkgreen; | ||
| margin: 15px; | ||
| background: green; | ||
| width: 100.125px; | ||
| height: 50.875px; | ||
| } | ||
| .shift { | ||
| position: relative; | ||
| left: 0.4px; | ||
| } | ||
| body { background: lightpink } | ||
| </style> | ||
| <div class="box"></div> | ||
| <div class="box shift"></div> |