Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
blink: Ensure correct intrinsic sizing for transition elements.
The intrinsic size of the replaced elements created for DocumentTransition is the post page zoom size of an element. Apply the page zoom factor to ensure this. Also adds tests for the following cases: - An element with a transform. - Using object-view-box to display a subset of the element. R=vmpstr@chromium.org Bug: 1303102 Change-Id: Ib8fb3b391a481dd59bbe4e1c54c06532efd74444 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3579292 Auto-Submit: Khushal Sagar <khushalsagar@chromium.org> Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#990709}
- Loading branch information
1 parent
4e83984
commit 8c50f01
Showing
13 changed files
with
355 additions
and
20 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
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
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
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
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
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
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
60 changes: 60 additions & 0 deletions
60
...ty/blink/web_tests/wpt_internal/document-transition/content-with-transform-new-image.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,60 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>Shared transitions: object-view-box</title> | ||
| <link rel="help" href="https://github.com/WICG/shared-element-transitions"> | ||
| <link rel="author" href="mailto:khushalsagar@chromium.org"> | ||
| <link rel="match" href="content-with-transform-ref.html"> | ||
|
|
||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .target { | ||
| contain: paint; | ||
| width: 100px; | ||
| height: 100px; | ||
| transform: scale(2.0, 3.0); | ||
| } | ||
|
|
||
| .embedded { | ||
| width: 100px; | ||
| height: 50px; | ||
| } | ||
|
|
||
| .hidden { | ||
| contain: paint; | ||
| width: 10px; | ||
| height: 10px; | ||
| background: grey; | ||
| } | ||
|
|
||
| html::page-transition-container(hidden) { animation-duration: 300s; } | ||
| html::page-transition-image-wrapper(hidden) { animation: unset; opacity: 0; } | ||
|
|
||
| html::page-transition-incoming-image(target) { | ||
| animation: unset; | ||
| opacity: 1; | ||
| } | ||
| html::page-transition-outgoing-image(target) { animation: unset; opacity: 0; } | ||
|
|
||
| </style> | ||
|
|
||
| <div id="target" class="target"> | ||
| <div class="embedded" style="background: green;">Shared</div> | ||
| <div class="embedded" style="background: blue">Element</div> | ||
| </div> | ||
| <div id=hidden class=hidden></div> | ||
|
|
||
| <script> | ||
| async function runTest() { | ||
| let t = document.createDocumentTransition(); | ||
| t.setElement(hidden, "hidden"); | ||
| t.setElement(target, "target"); | ||
| t.start(() => { | ||
| t.setElement(hidden, "hidden"); | ||
| t.setElement(target, "target"); | ||
|
|
||
| requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); | ||
| }); | ||
| } | ||
| onload = () => requestAnimationFrame(runTest); | ||
| </script> | ||
|
|
60 changes: 60 additions & 0 deletions
60
...ty/blink/web_tests/wpt_internal/document-transition/content-with-transform-old-image.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,60 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>Shared transitions: object-view-box</title> | ||
| <link rel="help" href="https://github.com/WICG/shared-element-transitions"> | ||
| <link rel="author" href="mailto:khushalsagar@chromium.org"> | ||
| <link rel="match" href="content-with-transform-ref.html"> | ||
|
|
||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| .target { | ||
| contain: paint; | ||
| width: 100px; | ||
| height: 100px; | ||
| transform: scale(2.0, 3.0); | ||
| } | ||
|
|
||
| .embedded { | ||
| width: 100px; | ||
| height: 50px; | ||
| } | ||
|
|
||
| .hidden { | ||
| contain: paint; | ||
| width: 10px; | ||
| height: 10px; | ||
| background: grey; | ||
| } | ||
|
|
||
| html::page-transition-container(hidden) { animation-duration: 300s; } | ||
| html::page-transition-image-wrapper(hidden) { animation: unset; opacity: 0; } | ||
|
|
||
| html::page-transition-outgoing-image(target) { | ||
| animation: unset; | ||
| opacity: 1; | ||
| } | ||
| html::page-transition-incoming-image(target) { animation: unset; opacity: 0; } | ||
|
|
||
| </style> | ||
|
|
||
| <div id="target" class="target"> | ||
| <div class="embedded" style="background: green;">Shared</div> | ||
| <div class="embedded" style="background: blue">Element</div> | ||
| </div> | ||
| <div id=hidden class=hidden></div> | ||
|
|
||
| <script> | ||
| async function runTest() { | ||
| let t = document.createDocumentTransition(); | ||
| t.setElement(hidden, "hidden"); | ||
| t.setElement(target, "target"); | ||
| t.start(() => { | ||
| t.setElement(hidden, "hidden"); | ||
| t.setElement(target, "target"); | ||
|
|
||
| requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); | ||
| }); | ||
| } | ||
| onload = () => requestAnimationFrame(runTest); | ||
| </script> | ||
|
|
24 changes: 24 additions & 0 deletions
24
third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-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,24 @@ | ||
| <!DOCTYPE html> | ||
| <title>Shared transitions: object-view-box (ref)</title> | ||
| <link rel="help" href="https://github.com/WICG/shared-element-transitions"> | ||
| <link rel="author" href="mailto:vmpstr@chromium.org"> | ||
| <style> | ||
| .target { | ||
| contain: paint; | ||
| width: 100px; | ||
| height: 100px; | ||
| transform: scale(2.0, 3.0); | ||
| } | ||
|
|
||
| .embedded { | ||
| width: 100px; | ||
| height: 50px; | ||
| } | ||
|
|
||
| </style> | ||
| <div id="target" class="target"> | ||
| <div class="embedded" style="background: green;">Shared</div> | ||
| <div class="embedded" style="background: blue">Element</div> | ||
| </div> | ||
| </div> | ||
|
|
Oops, something went wrong.