-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add view-transition-capture-mode CSS property
This property has the values of flat | layered, layered by default. - Flat is the current way we capture view transition content - Layered is the new way, which captures box decorations and effects as style instead of baking them into the image. Bug: 347947051 Change-Id: If70c8436ef34d194002452447dbd2d5ebedfa387 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5935195 Commit-Queue: Noam Rosenthal <[email protected]> Reviewed-by: Khushal Sagar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1369285}
- Loading branch information
1 parent
32d9a66
commit c35d4f9
Showing
4 changed files
with
126 additions
and
0 deletions.
There are no files selected for viewing
45 changes: 45 additions & 0 deletions
45
css/css-view-transitions/layered-capture/capture-mode-flat.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,45 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>Capture mode: flat</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="nested-opacity-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <script src="../nested/resources/compute-test.js"></script> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| } | ||
| div { | ||
| position: absolute; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: green; | ||
| } | ||
|
|
||
| .parent { | ||
| opacity: 0.4; | ||
| view-transition-name: parent; | ||
| view-transition-capture-mode: flat; | ||
| will-change: opacity; | ||
| } | ||
|
|
||
| .child { | ||
| top: 50px; | ||
| left: 50px; | ||
| } | ||
|
|
||
| ::view-transition-group(parent) { | ||
| animation-name: none; | ||
| opacity: 1; | ||
| } | ||
| ::view-transition-old(*), | ||
| ::view-transition-new(*) { | ||
| animation-play-state: paused; | ||
| } | ||
| </style> | ||
| <body> | ||
| <div class="parent"> | ||
| <div class="child"></div> | ||
| </div> | ||
| </body> |
45 changes: 45 additions & 0 deletions
45
css/css-view-transitions/layered-capture/capture-mode-layered.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,45 @@ | ||
| <!DOCTYPE html> | ||
| <html class=reftest-wait> | ||
| <title>Captured mode: layered</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="nested-opacity-ref.html"> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <script src="../nested/resources/compute-test.js"></script> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| } | ||
| div { | ||
| position: absolute; | ||
| width: 100px; | ||
| height: 100px; | ||
| background: green; | ||
| } | ||
|
|
||
| .parent { | ||
| opacity: 0.7; | ||
| view-transition-name: parent; | ||
| will-change: opacity; | ||
| view-transition-capture-mode: layered; | ||
| } | ||
|
|
||
| .child { | ||
| top: 50px; | ||
| left: 50px; | ||
| } | ||
|
|
||
| ::view-transition-group(parent) { | ||
| opacity: 0.4; | ||
| animation-name: none; | ||
| } | ||
| ::view-transition-old(*), | ||
| ::view-transition-new(*) { | ||
| animation-play-state: paused; | ||
| } | ||
| </style> | ||
| <body> | ||
| <div class="parent"> | ||
| <div class="child"></div> | ||
| </div> | ||
| </body> |
18 changes: 18 additions & 0 deletions
18
css/css-view-transitions/parsing/view-transition-capture-mode-invalid.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,18 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS View Transitions Test: view-transition-capture-mode with invalid values</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| test_invalid_value("view-transition-capture-mode", "none"); | ||
| test_invalid_value("view-transition-capture-mode", "auto"); | ||
| test_invalid_value("view-transition-capture-mode", "stuff"); | ||
| </script> | ||
| </body> | ||
| </html> |
18 changes: 18 additions & 0 deletions
18
css/css-view-transitions/parsing/view-transition-capture-mode-valid.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,18 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS View Transitions Test: view-transition-capture-mode with valid values</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| test_valid_value("view-transition-capture-mode", "flat"); | ||
| test_valid_value("view-transition-capture-mode", "layered"); | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |