summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-transitions
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-transitions')
-rw-r--r--testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html41
-rw-r--r--testing/web-platform/tests/css/css-transitions/transition-behavior.html122
2 files changed, 122 insertions, 41 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html b/testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html
deleted file mode 100644
index 37946717b4..0000000000
--- a/testing/web-platform/tests/css/css-transitions/all-with-discrete.tentative.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<link rel=author href="mailto:jarhar@chromium.org">
-<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/css-animations/support/testcommon.js"></script>
-
-<div class=testcase id=discrete>Allow discrete</div>
-<div class=testcase id=normal>No discrete</div>
-
-<style>
-.testcase {
- float: left;
- width: 100px;
- height: 100px;
- transition: all 1s;
-}
-#discrete {
- transition-behavior: allow-discrete;
-}
-.animated {
- float: right;
-}
-</style>
-
-<script>
-promise_test(async () => {
- await waitForAnimationFrames(2);
- // Regression test for https://crbug.com/1518561
- normal.classList.add('animated');
- const normalAnims = normal.getAnimations();
- assert_equals(normalAnims.length, 0,
- "Started a discrete property transition on a normal element");
-
- discrete.classList.add('animated');
- const anims = discrete.getAnimations();
- assert_equals(anims.length, 1,
- "Did not start a discrete-property transition");
- assert_equals(anims[0].transitionProperty, 'float');
-}, 'transition:all with transition-behavior:allow-discrete should animate discrete properties.');
-</script>
diff --git a/testing/web-platform/tests/css/css-transitions/transition-behavior.html b/testing/web-platform/tests/css/css-transitions/transition-behavior.html
new file mode 100644
index 0000000000..fa24509a37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/transition-behavior.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-behavior-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/css-animations/support/testcommon.js"></script>
+
+<div class=testcase id=discrete>Allow discrete</div>
+<div class=testcase id=normal>No discrete</div>
+
+<style>
+.testcase {
+ float: left;
+ width: 100px;
+ height: 100px;
+ transition: all 1s;
+}
+#discrete {
+ transition-behavior: allow-discrete;
+}
+.animated {
+ float: right;
+}
+</style>
+
+<script>
+promise_test(async () => {
+ await waitForAnimationFrames(2);
+ // Regression test for https://crbug.com/1518561
+ normal.classList.add('animated');
+ const normalAnims = normal.getAnimations();
+ assert_equals(normalAnims.length, 0,
+ "Should not start a discrete property transition");
+
+ discrete.classList.add('animated');
+ const anims = discrete.getAnimations();
+ assert_equals(anims.length, 1,
+ "Should start a discrete property transition");
+ assert_equals(anims[0].transitionProperty, 'float');
+}, 'transition-behavior:allow-discrete should animate discrete properties.');
+
+promise_test(async t => {
+ const div = addDiv(t, {
+ style: 'transition: all 1s normal, float 1s allow-discrete; float: left',
+ });
+ getComputedStyle(div).float;
+
+ div.style.float = 'right';
+ const anims = div.getAnimations();
+ assert_equals(anims.length, 1,
+ "Should start a discrete property transition");
+}, 'transition-behavior:allow-discrete overlaps the previous normal value.');
+
+promise_test(async t => {
+ const div = addDiv(t, {
+ style: 'transition: all 1s allow-discrete, float 1s normal; float: left',
+ });
+ getComputedStyle(div).float;
+
+ div.style.float = 'right';
+ const anims = div.getAnimations();
+ assert_equals(anims.length, 0,
+ "Should not start a discrete property transition");
+}, 'transition-behavior:normal overlaps the previous allow-discrete value.');
+
+promise_test(async t => {
+ const div = addDiv(t, {
+ style: 'transition: position 1s allow-discrete; position: relative',
+ });
+ getComputedStyle(div).position;
+
+ div.style.position = 'static';
+ assert_equals(div.getAnimations().length, 1,
+ "Should start a discrete property transition");
+
+ div.style.transitionBehavior = "normal";
+ div.style.position = 'absolute';
+ assert_equals(getComputedStyle(div).position, "absolute");
+ assert_equals(div.getAnimations().length, 0,
+ "The running transition should be cancelled");
+}, 'transition-behavior changed to normal should stop the running discrete ' +
+ 'transitions.');
+
+promise_test(async t => {
+ const div = addDiv(t, {
+ style: 'transition: clip-path 5s normal; clip-path: circle(50px)',
+ });
+ getComputedStyle(div).transition;
+
+ div.style.clipPath = "circle(farthest-side)";
+ assert_equals(getComputedStyle(div).clipPath, "circle(farthest-side)");
+ assert_equals(div.getAnimations().length, 0,
+ "Should not start a transition of discrete animation values");
+
+ div.style.transitionBehavior = "allow-discrete";
+ div.style.clipPath = "circle(200px)";
+ assert_equals(getComputedStyle(div).clipPath, "circle(farthest-side)");
+ assert_equals(div.getAnimations().length, 1,
+ "Should start a transition for discrete animation values");
+}, 'transition-behavior:allow-discrete should animate for values fallback to ' +
+ 'discrete animations.');
+
+promise_test(async t => {
+ const div = addDiv(t, {
+ style: 'transition: clip-path 5s allow-discrete; clip-path: circle(50px)',
+ });
+ getComputedStyle(div).transition;
+
+ div.style.clipPath = "circle(farthest-side)";
+ assert_equals(getComputedStyle(div).clipPath, "circle(50px)");
+ assert_equals(div.getAnimations().length, 1,
+ "Should start a transition for discrete animation values");
+
+ div.style.transitionBehavior = "normal";
+ div.style.clipPath = "ellipse()";
+ assert_equals(getComputedStyle(div).clipPath, "ellipse()");
+ assert_equals(div.getAnimations().length, 0,
+ "The running transition should be cancelled");
+}, 'transition-behavior:normal should cancel the running transitions whose ' +
+ 'animation values are not interpolatable');
+
+</script>