-
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.
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=275993 (#46932)
- Loading branch information
Showing
4 changed files
with
88 additions
and
0 deletions.
There are no files selected for viewing
23 changes: 23 additions & 0 deletions
23
css/css-transforms/animation/transform-interpolation-007.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,23 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="UTF-8"> | ||
| <title>transform interpolation</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#matrix-interpolation"> | ||
| <meta name="assert" content="transform does not interpolate between non-invertible and invertible matrices"> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/interpolation-testcommon.js"></script> | ||
|
|
||
| <body> | ||
| <template id="target-template"> | ||
| <div></div> | ||
| </template> | ||
| </body> | ||
|
|
||
| <script> | ||
| test_no_interpolation({ | ||
| property: 'transform', | ||
| from: 'matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1)', | ||
| to: 'matrix(3, 0, 0, 3, 0, 0)', | ||
| }); | ||
| </script> |
5 changes: 5 additions & 0 deletions
5
css/css-transforms/animation/transform-non-invertible-discrete-interpolation-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,5 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <body> | ||
| </body> | ||
| </html> |
34 changes: 34 additions & 0 deletions
34
css/css-transforms/animation/transform-non-invertible-discrete-interpolation.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,34 @@ | ||
| <!DOCTYPE html> | ||
| <html class="reftest-wait"> | ||
| <head> | ||
| <title>Animating the "transform" property with a non-invertible matrix should not yield an animation</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-transforms/"> | ||
| <link rel="match" href="transform-non-invertible-discrete-interpolation-ref.html"> | ||
| <script src="../../../common/reftest-wait.js"></script> | ||
| <style> | ||
|
|
||
| div { | ||
| width: 100px; | ||
| height: 100px; | ||
| background-color: black; | ||
| animation: anim 100s linear forwards; | ||
| } | ||
|
|
||
| @keyframes anim { | ||
| from { transform: matrix3d(2,0,0,0, 0,2,0,0, 0,0,0,0, 0,0,0,1) } | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <div></div> | ||
| <script> | ||
| (async function() { | ||
| await Promise.all(document.getAnimations().map(animation => animation.ready)); | ||
| await new Promise(requestAnimationFrame); | ||
| await new Promise(requestAnimationFrame); | ||
| takeScreenshot(); | ||
| })(); | ||
| </script> | ||
| </body> | ||
| </html> |
26 changes: 26 additions & 0 deletions
26
css/css-transforms/animation/transform-non-invertible-no-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,26 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="UTF-8"> | ||
| <title>transform interpolation</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#matrix-interpolation"> | ||
| <meta name="assert" content="transform does not transition between non-invertible and invertible matrices"> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/css-transitions/support/helper.js"></script> | ||
|
|
||
| <style> | ||
|
|
||
| #target { | ||
| transition: transform 1s; | ||
| } | ||
|
|
||
| </style> | ||
| <div id="target"></div> | ||
| <script> | ||
| promise_test(async t => { | ||
| await waitForAnimationFrames(1); | ||
| const target = document.getElementById("target"); | ||
| target.style.transform = "matrix3d(2,0,0,0, 0,2,0,0, 0,0,0,0, 0,0,0,1)"; | ||
| assert_equals(document.getAnimations().length, 0, "No transitions"); | ||
| }, "Setting 'transform' to a non-invertible matrix does not yield a CSS Transition"); | ||
| </script> |