Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-27 14:52:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1924957 [wpt PR 48643] - Add view-transition-capture-mode CSS property, a=testonly

Browse Source 
Automatic update from web-platform-tests
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 <nrosenthal@chromium.org>
Reviewed-by: Khushal Sagar <khushalsagar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1369285}

--

wpt-commits: c35d4f9d01157cbf8b49d1f9906dfbc36865a839
wpt-pr: 48643
This commit is contained in:
Noam Rosenthal 2024-10-16 22:18:56 +00:00 committed by moz-wptsync-bot
parent 331ad1e869
commit ec204ef8a9
4 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
testing/web-platform/tests/css/css-view-transitions/layered-capture/capture-mode-flat.html Normal file
View File

@ -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
testing/web-platform/tests/css/css-view-transitions/layered-capture/capture-mode-layered.html Normal file
View File

@ -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
testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-capture-mode-invalid.html Normal file
View File

@ -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
testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-capture-mode-valid.html Normal file
View File

@ -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>