Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

2025-08-06 06:00:15 +01:00 · 2017-10-31 08:58:31 -04:00 · 2017-10-31 08:58:31 -04:00 · 64e0a52537
commit 64e0a52537
parent 43a4f01647
12717 changed files with 59835 additions and 59820 deletions
--- a/tests/wpt/web-platform-tests/css/css-variables/variable-pseudo-element.html
+++ b/tests/wpt/web-platform-tests/css/css-variables/variable-pseudo-element.html
@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Parse, store, and serialize CSS variable references</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">
+
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+
+    <!--
+        https://drafts.csswg.org/css-syntax/#error-handling
+        If the stylesheet ends while any rule, declaration, function, string, etc. are still open, everything is automatically closed.
+    -->
+    <style id="variable-reference-left-open">
+        div
+        {
+            color: var(--my-color);
+            --my-color: blue;
+            --my-color2: red;
+        }
+
+        #div1::after
+        {
+            content: '[after]';
+            color: var(--my-color);
+            --my-color: orange;
+        }
+
+        #div2::after
+        {
+            content: '[after]';
+            color: var(--my-color2);
+        }
+
+        #div3::after
+        {
+            content: '[after]';
+            --my-color: orange;
+        }
+
+        #div4::after
+        {
+            content: '[after]';
+            color: var(--my-color);
+            --my-color: pink;
+        }
+
+        #div1::before
+        {
+            content: '[before]';
+            color: var(--my-color);
+            --my-color: orange;
+        }
+
+        #div2::before
+        {
+            content: '[before]';
+            color: var(--my-color2);
+        }
+
+        #div3::before
+        {
+            content: '[before]';
+            --my-color: orange;
+        }
+
+        #div4::before
+        {
+            content: '[before]';
+            color: var(--my-color);
+            --my-color: purple;
+        }
+    </style>
+</head>
+<body>
+    <div id="div1">div1</div>
+    <div id="div2">div2</div>
+    <div id="div3">div3</div>
+    <div id="div4">div4</div>
+
+<script type="text/javascript">
+    "use strict";
+
+    var testcases = [
+        { ID: "div1", expectedAfterColor: "rgb(255, 165, 0)", expectedBeforeColor: "rgb(255, 165, 0)" },
+        { ID: "div2", expectedAfterColor: "rgb(255, 0, 0)", expectedBeforeColor: "rgb(255, 0, 0)" },
+        { ID: "div3", expectedAfterColor: "rgb(0, 0, 255)", expectedBeforeColor: "rgb(0, 0, 255)" },
+        { ID: "div4", expectedAfterColor: "rgb(255, 192, 203)", expectedBeforeColor: "rgb(128, 0, 128)" },
+    ];
+
+    testcases.forEach(function (testcase) {
+        test( function () {
+            var div = document.getElementById(testcase.ID);
+            var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
+            var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color');
+            assert_equals(actualBeforeColor, testcase.expectedBeforeColor, "The color of the before pseudo element should match the expected color");
+            assert_equals(actualAfterColor, testcase.expectedAfterColor, "The color of the after pseudo element should match the expected color");
+        }, testcase.ID);
+    });
+</script>
+
+</body>
+</html>