-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
view-transition: Test concurrent transitions in sibling frames.
Bug: 330917526 Change-Id: I383767131b6d5df6345d901fa433f68f3497a847 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5530586 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Commit-Queue: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1300897}
- Loading branch information
1 parent
6818346
commit 9eaa13b
Showing
2 changed files
with
143 additions
and
0 deletions.
There are no files selected for viewing
42 changes: 42 additions & 0 deletions
42
css/css-view-transitions/sibling-frames-transition-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,42 @@ | ||
| <!DOCTYPE html> | ||
| <title>View transitions: main frame and sibling frames transition at the same time (ref)</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:khushalsagar@chromium.org"> | ||
| <style> | ||
| body { | ||
| background: green; | ||
| } | ||
|
|
||
| #first { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 50vw; | ||
| height: 50vh; | ||
| } | ||
|
|
||
| #second { | ||
| position: fixed; | ||
| top: 50vh; | ||
| left: 0; | ||
| width: 50vw; | ||
| height: 50vh; | ||
| } | ||
| </style> | ||
|
|
||
| <iframe id="first" srcdoc=" | ||
| <style> | ||
| body { | ||
| background: lightblue; | ||
| } | ||
| </style> | ||
| <body></body>"></iframe> | ||
| <iframe id="second" srcdoc=" | ||
| <style> | ||
| body { | ||
| background: magenta; | ||
| } | ||
| </style> | ||
| <body></body>"></iframe> | ||
|
|
||
|
|
101 changes: 101 additions & 0 deletions
101
css/css-view-transitions/sibling-frames-transition.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,101 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>View transitions: main frame and sibling frames transition at the same time</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> | ||
| <link rel="author" href="mailto:khushalsagar@chromium.org"> | ||
| <link rel="match" href="sibling-frames-transition-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| #first { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 50vw; | ||
| height: 50vh; | ||
| view-transition-name: first; | ||
| } | ||
|
|
||
| #second { | ||
| position: fixed; | ||
| top: 50vh; | ||
| left: 0; | ||
| width: 50vw; | ||
| height: 50vh; | ||
| view-transition-name: second; | ||
| } | ||
|
|
||
| /* The main frame is showing the old screenshot for the root*/ | ||
| ::view-transition-group(root) { | ||
| animation-duration: 300s; | ||
| } | ||
| ::view-transition-new(root) { | ||
| animation: unset; | ||
| opacity: 0; | ||
| } | ||
| ::view-transition-old(root) { | ||
| animation: unset; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| /* For the iframes, show the new screenshot */ | ||
| ::view-transition-new(first), ::view-transition-new(second) { | ||
| animation: unset; | ||
| opacity: 1; | ||
| } | ||
| ::view-transition-old(first), ::view-transition-old(second) { | ||
| animation: unset; | ||
| opacity: 0; | ||
| } | ||
| </style> | ||
|
|
||
| <iframe id="first" srcdoc=" | ||
| <style> | ||
| /* The iframe is showing new live DOM */ | ||
| ::view-transition-group(root) { | ||
| animation-duration: 300s; | ||
| } | ||
| ::view-transition-new(root) { | ||
| animation: unset; | ||
| opacity: 1; | ||
| } | ||
| ::view-transition-old(root) { | ||
| animation: unset; | ||
| opacity: 0; | ||
| } | ||
| </style> | ||
| <body></body>"></iframe> | ||
| <iframe id="second" srcdoc=" | ||
| <style> | ||
| /* The iframe is showing old DOM */ | ||
| ::view-transition-group(root) { | ||
| animation-duration: 300s; | ||
| } | ||
| ::view-transition-new(root) { | ||
| animation: unset; | ||
| opacity: 0; | ||
| } | ||
| ::view-transition-old(root) { | ||
| animation: unset; | ||
| opacity: 1; | ||
| } | ||
| </style> | ||
| <body></body>"></iframe> | ||
| <script> | ||
| onload = runTest; | ||
|
|
||
| async function startTransition(document, oldColor, newColor) { | ||
| document.documentElement.style.background = oldColor; | ||
| await document.startViewTransition(() => { | ||
| document.documentElement.style.background = newColor; | ||
| }).ready; | ||
| } | ||
|
|
||
| async function runTest() { | ||
| await startTransition(document, "green", "lightgreen"); | ||
| await startTransition(first.contentDocument, "blue", "lightblue"); | ||
| await startTransition(second.contentDocument, "magenta", "orange"); | ||
|
|
||
| takeScreenshot(); | ||
| } | ||
| </script> | ||
|
|