Merge pull request #5288 from w3c/csswg-test-pr-1249

Submitting ported Microsoft custom props test suite
web-platform-tests · Jun 5, 2017 · a861f2b · a861f2b
2 parents f2a30cc + 7a3330a
commit a861f2b
Show file tree

Hide file tree

Showing 44 changed files with 2,984 additions and 1 deletion.
diff --git a/css/css-variables-1/resources/variable-reference-refresh-iframe.css b/css/css-variables-1/resources/variable-reference-refresh-iframe.css
@@ -0,0 +1,5 @@
+#testElement
+{
+    --color: green;
+    color: var(--color);
+}
diff --git a/css/css-variables-1/resources/variable-reference-refresh-iframe.html b/css/css-variables-1/resources/variable-reference-refresh-iframe.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Content used for within variable-reference-refresh</title>
+    <meta rel="author" title="Kevin Babbitt">
+    <meta rel="author" title="Greg Whitworth">
+    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
+    <!-- This is not directly specified in the spec but should work -->
+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+
+    <link rel="stylesheet" href="variable-reference-refresh-iframe.css">
+</head>
+<body style="color: red;">
+    <div id="testElement">This text should be green.</div>
+</body>
+</html>
diff --git a/css/css-variables-1/variable-animation-from-to.html b/css/css-variables-1/variable-animation-from-to.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Variables - Animation - From and To Values</title>
+    <meta rel="author" title="Kevin Babbitt">
+    <meta rel="author" title="Greg Whitworth">
+    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        @keyframes valueanim
+        {
+            from { --value: blue; }
+            to { --value: green; }
+        }
+
+        /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
+        #target
+        {
+            animation-name: valueanim;
+            animation-duration: 1s;
+            animation-play-state: paused;
+            animation-fill-mode: both;
+            --value: red;
+            color: var(--value);
+        }
+    </style>
+</head>
+<body>
+
+    <div id="target">This text should animate from blue to green over a period of 1 second.</div>
+
+<script type="text/javascript">
+    "use strict";
+
+    // Force an initial layout pass
+    document.documentElement.offsetHeight;
+
+    test(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before animation runs");
+        }, "Verify CSS variable value before animation");
+
+    test(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before animation runs");
+        }, "Verify substituted color value before animation");
+
+    var afterAnimationVariableTest = async_test("Verify CSS variable value after animation");
+    document.getElementById("target").addEventListener("animationend", afterAnimationVariableTest.step_func_done(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs")
+        }));
+
+    var afterAnimationColorTest = async_test("Verify substituted color value after animation");
+    document.getElementById("target").addEventListener("animationend", afterAnimationColorTest.step_func_done(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after animation runs")
+        }));
+
+    // Trigger animation
+    document.getElementById("target").style.animationPlayState = "running";
+</script>
+
+</body>
+</html>
diff --git a/css/css-variables-1/variable-animation-over-transition.html b/css/css-variables-1/variable-animation-over-transition.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Variables - Animation - Overriding Transition</title>
+
+    <meta rel="author" title="Kevin Babbitt">
+    <meta rel="author" title="Greg Whitworth">
+    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        @keyframes valueanim
+        {
+            from { --value: blue; }
+            to { --value: green; }
+        }
+
+        /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
+        #target
+        {
+            animation-name: valueanim;
+            animation-duration: 1s;
+            animation-play-state: paused;
+            animation-fill-mode: both;
+            transition-property: --value;
+            transition-duration: 1s;
+            --value: red;
+            color: var(--value);
+        }
+        #target.changed
+        {
+            --value: black;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="target">This text should animate from blue to green over a period of 1 second. The transition is not visible because the animation overrides it.</div>
+
+<script type="text/javascript">
+    "use strict";
+
+    // Force an initial layout pass
+    document.documentElement.offsetHeight;
+
+    test(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before animation runs");
+        }, "Verify CSS variable value before animation");
+
+    test(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before animation runs");
+        }, "Verify substituted color value before animation");
+
+    var afterAnimationVariableTest = async_test("Verify CSS variable value after animation");
+    document.getElementById("target").addEventListener("animationend", afterAnimationVariableTest.step_func_done(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs")
+        }));
+
+    var afterAnimationColorTest = async_test("Verify substituted color value after animation");
+    document.getElementById("target").addEventListener("animationend", afterAnimationColorTest.step_func_done(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after animation runs")
+        }));
+
+    // Trigger animation and transition
+    document.getElementById("target").style.animationPlayState = "running";
+    document.getElementById("target").className = "changed";
+</script>
+
+</body>
+</html>
diff --git a/css/css-variables-1/variable-animation-substitute-into-keyframe-shorthand.html b/css/css-variables-1/variable-animation-substitute-into-keyframe-shorthand.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Variables - Animation - Substitute Into Keyframe with Shorthand</title>
+
+    <meta rel="author" title="Kevin Babbitt">
+    <meta rel="author" title="Greg Whitworth">
+    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+        @keyframes coloranim
+        {
+            from { border: 1px solid blue; }
+            to { border: 1px solid var(--endColor); }
+        }
+
+        /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
+        #target
+        {
+            animation-name: coloranim;
+            animation-duration: 1s;
+            animation-play-state: paused;
+            animation-fill-mode: both;
+        }
+        #target
+        {
+            border: 1px solid red;
+            --endColor: green;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="target">The border around this text should animate from blue to green over a period of 1 second.</div>
+
+<script type="text/javascript">
+    "use strict";
+
+    // Force an initial layout pass
+    document.documentElement.offsetHeight;
+
+    test(function() {
+        // Different browsers generate interpolated colors differently, so check multiple valid forms.
+        assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("border-bottom-color").trim(),
+            ["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"],
+            "border-bottom-color is blue before animation runs");
+        }, "Verify border-bottom-color before animation");
+
+    var animationTest = async_test("Verify border-bottom-color after animation");
+
+    animationTest.step(function() {
+        // Set event handler
+        document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() {
+            assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("border-bottom-color").trim(),
+            ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
+            "border-bottom-color is green after animation runs")
+            animationTest.done();
+            }));
+
+        // Trigger animation
+        document.getElementById("target").style.animationPlayState = "running";
+    });
+</script>
+
+</body>
+</html>
diff --git a/css/css-variables-1/variable-animation-substitute-into-keyframe-transform.html b/css/css-variables-1/variable-animation-substitute-into-keyframe-transform.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Variables - Animation - Substitute Into Keyframe - transform property</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+
+    <meta rel="author" title="Kevin Babbitt">
+    <meta rel="author" title="Greg Whitworth">
+    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+
+    <style>
+        @keyframes transformanim
+        {
+            from { transform: scale(0.5); }
+            to { transform: scale(var(--finalScale)); }
+        }
+
+        /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
+        #target
+        {
+            animation-name: transformanim;
+            animation-duration: 1s;
+            animation-play-state: paused;
+            animation-fill-mode: both;
+            transform-origin: 0 0;
+            --finalScale: 2;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="target">This text should scale from half size to double size over a period of 1 second.</div>
+
+<script type="text/javascript">
+    "use strict";
+
+    // Force an initial layout pass
+    document.documentElement.offsetHeight;
+
+    test(function() {
+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(),
+            "matrix(0.5, 0, 0, 0.5, 0, 0)",
+            "scale is 0.5 before animation runs");
+        }, "Verify transform before animation");
+
+    var animationTest = async_test("Verify transform after animation");
+
+    animationTest.step(function() {
+        // Set event handler
+        document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() {
+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(),
+                "matrix(2, 0, 0, 2, 0, 0)",
+                "scale is 2 after animation runs")
+            animationTest.done();
+            }));
+
+        // Trigger animation
+        document.getElementById("target").style.animationPlayState = "running";
+    });
+</script>
+
+</body>
+</html>
diff --git a/css/css-variables-1/variable-animation-substitute-into-keyframe.html b/css/css-variables-1/variable-animation-substitute-into-keyframe.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Variables - Animation - Substitute Into Keyframe</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+
+    <meta rel="author" title="Kevin Babbitt">
+    <meta rel="author" title="Greg Whitworth">
+    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+
+    <style>
+        @keyframes coloranim
+        {
+            from { color: blue; }
+            to { color: var(--endColor); }
+        }
+
+        /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */
+        #target
+        {
+            animation-name: coloranim;
+            animation-duration: 1s;
+            animation-play-state: paused;
+            animation-fill-mode: both;
+        }
+        #target
+        {
+            color: red;
+            --endColor: green;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="target">This text should animate from blue to green over a period of 1 second.</div>
+
+<script type="text/javascript">
+    "use strict";
+
+    // Force an initial layout pass
+    document.documentElement.offsetHeight;
+
+    test(function() {
+        // Different browsers generate interpolated colors differently, so check multiple valid forms.
+        assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
+            ["rgb(0, 0, 255)", "rgba(0, 0, 255, 1)"],
+            "color is blue before animation runs");
+        }, "Verify color before animation");
+
+    var animationTest = async_test("Verify color after animation");
+
+    animationTest.step(function() {
+        // Set event handler
+        document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() {
+            assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
+                ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
+                "color is green after animation runs")
+            animationTest.done();
+            }));
+
+        // Trigger animation
+        document.getElementById("target").style.animationPlayState = "running";
+    });
+</script>
+
+</body>
+</html>