Attachment 357977 Details for Bug 192828 – Patch

[patch] Patch

bug-192828-20181221140019.patch (text/plain), 267.00 KB, created by Justin Michaud on 2018-12-21 14:00:29 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Justin Michaud

Created: 2018-12-21 14:00:29 PST

Size: 267.00 KB

patch

obsolete

>Subversion Revision: 239507
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index d79908336129502d1f309ed4092b0225cc4f93d3..11229494e540b409bdd574b07a21a226f89e2626 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,89 @@
>+2018-12-21  Justin Michaud  <justin_michaud@apple.com>
>+
>+        Fix CSS Variable cycle detection and import CSS Variables web platform tests
>+        https://bugs.webkit.org/show_bug.cgi?id=192828
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Import WPT tests for CSS variables. Fix a crash caused by exponential variable substitution by limiting the depth of recursion
>+        and limiting the max size of a substituted property. Add a separate pass to detect cycles (like how it was done when variables
>+        were resolved in RenderStyle), so that no properties in a cycle are missed if resolution begins at a variable that is referenced somewhere. 
>+
>+        Tests: fast/backgrounds/background-repeat-with-zero-size.html
>+               imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html
>+               imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html
>+               imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-created-document.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-created-element.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-cssText.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-definition.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-first-letter.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-first-line.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-invalidation.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-reference.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all.html
>+               imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html
>+               imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001.html
>+               imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize.html
>+               imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001.html
>+
>+        * css/CSSVariableReferenceValue.cpp:
>+        (WebCore::resolveVariableFallback):
>+        (WebCore::resolveVariableReference):
>+        (WebCore::resolveTokenRange):
>+        (WebCore::CSSVariableReferenceValue::resolveVariableReferences const):
>+        (WebCore::checkReferencedCustomPropertyForCycles):
>+        (WebCore::checkTokenRangeForCycles):
>+        (WebCore::CSSVariableReferenceValue::checkReferencedCustomPropertiesForCycles const):
>+        * css/CSSVariableReferenceValue.h:
>+        * css/StyleResolver.cpp:
>+        (WebCore::StyleResolver::styleForKeyframe):
>+        (WebCore::StyleResolver::styleForPage):
>+        (WebCore::StyleResolver::applyMatchedProperties):
>+        (WebCore::StyleResolver::applyProperty):
>+        (WebCore::StyleResolver::resolvedVariableValue const):
>+        (WebCore::StyleResolver::setupStateForIndex):
>+        (WebCore::StyleResolver::checkCustomPropertyForCycles):
>+        (WebCore::StyleResolver::applyCascadedCustomProperty):
>+        * css/StyleResolver.h:
>+        * css/parser/CSSParser.cpp:
>+        (WebCore::CSSParser::parseValueWithVariableReferences):
>+        * css/parser/CSSParser.h:
>+
> 2018-12-21  Justin Michaud  <justin_michaud@apple.com>
> 
>         Repeated background images with zero size should display the background color
>diff --git a/Source/WebCore/css/CSSVariableReferenceValue.cpp b/Source/WebCore/css/CSSVariableReferenceValue.cpp
>index 94d63a3b58918aeab4efa9d7093b58f85d77e130..18bcfdbaeda463d86c1c3e9966b33f1398352fda 100644
>--- a/Source/WebCore/css/CSSVariableReferenceValue.cpp
>+++ b/Source/WebCore/css/CSSVariableReferenceValue.cpp
>@@ -44,19 +44,23 @@ String CSSVariableReferenceValue::customCSSText() const
>     return m_stringValue;
> }
> 
>-static bool resolveTokenRange(CSSParserTokenRange, Vector<CSSParserToken>&, ApplyCascadedPropertyState&);
>+static bool resolveTokenRange(CSSParserTokenRange, Vector<CSSParserToken>&, ApplyCascadedPropertyState&, bool&);
> 
>-static bool resolveVariableFallback(CSSParserTokenRange range, Vector<CSSParserToken>& result, ApplyCascadedPropertyState& state)
>+static bool resolveVariableFallback(CSSParserTokenRange range, Vector<CSSParserToken>& result, ApplyCascadedPropertyState& state, bool& substitutionValid)
> {
>     if (range.atEnd())
>         return false;
>     ASSERT(range.peek().type() == CommaToken);
>     range.consume();
>-    return resolveTokenRange(range, result, state);
>+    return resolveTokenRange(range, result, state, substitutionValid);
> }
> 
>-static bool resolveVariableReference(CSSParserTokenRange range, Vector<CSSParserToken>& result, ApplyCascadedPropertyState& state)
>+static bool resolveVariableReference(CSSParserTokenRange range, Vector<CSSParserToken>& result, ApplyCascadedPropertyState& state, bool& substitutionValid)
> {
>+    // This is an arbitrary limit, to make sure that we don't crash.
>+    if (result.size() > 10000)
>+        return false;
>+
>     auto& registeredProperties = state.styleResolver->document().getCSSRegisteredCustomPropertySet();
>     auto& style = *state.styleResolver->style();
> 
>@@ -68,10 +72,6 @@ static bool resolveVariableReference(CSSParserTokenRange range, Vector<CSSParser
>     // Apply this variable first, in case it is still unresolved
>     state.styleResolver->applyCascadedCustomProperty(variableName, state);
> 
>-    // Apply fallback to detect cycles
>-    Vector<CSSParserToken> fallbackResult;
>-    bool fallbackReturn = resolveVariableFallback(CSSParserTokenRange(range), fallbackResult, state);
>-
>     auto* property = style.getCustomProperty(variableName);
> 
>     if (!property || property->isUnset()) {
>@@ -81,38 +81,82 @@ static bool resolveVariableReference(CSSParserTokenRange range, Vector<CSSParser
>     }
> 
>     if (!property || property->isInvalid()) {
>-        if (fallbackReturn)
>+        Vector<CSSParserToken> fallbackResult;
>+        bool fallbacksubstitutionValid = true;
>+        if (resolveVariableFallback(CSSParserTokenRange(range), fallbackResult, state, fallbacksubstitutionValid)) {
>             result.appendVector(fallbackResult);
>-        return fallbackReturn;
>+            return true;
>+        }
>     }
> 
>+    if (!property)
>+        substitutionValid = false;
>+
>+    if (!property || property->isInvalid())
>+        return false;
>+
>     ASSERT(property->isResolved());
>     result.appendVector(property->tokens());
> 
>     return true;
> }
> 
>-static bool resolveTokenRange(CSSParserTokenRange range, Vector<CSSParserToken>& result, ApplyCascadedPropertyState& state)
>+static bool resolveTokenRange(CSSParserTokenRange range, Vector<CSSParserToken>& result, ApplyCascadedPropertyState& state, bool& substitutionValid)
> {
>     bool success = true;
>     while (!range.atEnd()) {
>         if (range.peek().functionId() == CSSValueVar || range.peek().functionId() == CSSValueEnv)
>-            success &= resolveVariableReference(range.consumeBlock(), result, state);
>+            success &= resolveVariableReference(range.consumeBlock(), result, state, substitutionValid);
>         else
>             result.append(range.consume());
>     }
>     return success;
> }
> 
>-RefPtr<CSSVariableData> CSSVariableReferenceValue::resolveVariableReferences(ApplyCascadedPropertyState& state) const
>+RefPtr<CSSVariableData> CSSVariableReferenceValue::resolveVariableReferences(ApplyCascadedPropertyState& state, bool& substitutionValid) const
> {
>     Vector<CSSParserToken> resolvedTokens;
>     CSSParserTokenRange range = m_data->tokenRange();
> 
>-    if (!resolveTokenRange(range, resolvedTokens, state))
>+    if (!resolveTokenRange(range, resolvedTokens, state, substitutionValid))
>         return nullptr;
> 
>     return CSSVariableData::create(resolvedTokens);
> }
> 
>+static void checkTokenRangeForCycles(CSSParserTokenRange, ApplyCascadedPropertyState&, HashSet<String>&, HashSet<String>&);
>+
>+static void checkReferencedCustomPropertyForCycles(CSSParserTokenRange range, ApplyCascadedPropertyState& state, HashSet<String>& referencedProperties, HashSet<String>& visited)
>+{
>+    range.consumeWhitespace();
>+    ASSERT(range.peek().type() == IdentToken);
>+    String variableName = range.consumeIncludingWhitespace().value().toString();
>+    ASSERT(range.atEnd() || (range.peek().type() == CommaToken));
>+
>+    state.styleResolver->checkCustomPropertyForCycles(variableName, state, referencedProperties, visited);
>+
>+    if (range.atEnd())
>+        return;
>+    ASSERT(range.peek().type() == CommaToken);
>+    range.consume();
>+    checkTokenRangeForCycles(range, state, referencedProperties, visited);
>+}
>+
>+static void checkTokenRangeForCycles(CSSParserTokenRange range, ApplyCascadedPropertyState& state, HashSet<String>& referencedProperties, HashSet<String>& visited)
>+{
>+    while (!range.atEnd()) {
>+        if (range.peek().functionId() == CSSValueVar || range.peek().functionId() == CSSValueEnv)
>+            checkReferencedCustomPropertyForCycles(range.consumeBlock(), state, referencedProperties, visited);
>+        else
>+            range.consume();
>+    }
>+}
>+
>+
>+void CSSVariableReferenceValue::checkReferencedCustomPropertiesForCycles(ApplyCascadedPropertyState& state, HashSet<String>& referencedProperties, HashSet<String>& visited) const
>+{
>+    CSSParserTokenRange range = m_data->tokenRange();
>+    checkTokenRangeForCycles(range, state, referencedProperties, visited);
>+}
>+
> } // namespace WebCore
>diff --git a/Source/WebCore/css/CSSVariableReferenceValue.h b/Source/WebCore/css/CSSVariableReferenceValue.h
>index d70e327c106ddaae823ff99bfa2a9cbba8b60686..a906da226f33dd000304c4c195b697dfd9d0f63e 100644
>--- a/Source/WebCore/css/CSSVariableReferenceValue.h
>+++ b/Source/WebCore/css/CSSVariableReferenceValue.h
>@@ -52,7 +52,8 @@ public:
>     bool equals(const CSSVariableReferenceValue& other) const { return m_data.get() == other.m_data.get(); }
>     String customCSSText() const;
> 
>-    RefPtr<CSSVariableData> resolveVariableReferences(ApplyCascadedPropertyState&) const;
>+    RefPtr<CSSVariableData> resolveVariableReferences(ApplyCascadedPropertyState&, bool& hasUndefinedValue) const;
>+    void checkReferencedCustomPropertiesForCycles(ApplyCascadedPropertyState&, HashSet<String>& referencedProperties, HashSet<String>& visited) const;
> 
> private:
>     CSSVariableReferenceValue(Ref<CSSVariableData>&& data)
>diff --git a/Source/WebCore/css/StyleResolver.cpp b/Source/WebCore/css/StyleResolver.cpp
>index d5ee934d2301e8b30182dfd97d50d102626a43e1..da7ee1629168e4d5ed2022580697809a653e596a 100644
>--- a/Source/WebCore/css/StyleResolver.cpp
>+++ b/Source/WebCore/css/StyleResolver.cpp
>@@ -432,6 +432,11 @@ std::unique_ptr<RenderStyle> StyleResolver::styleForKeyframe(const RenderStyle*
>     cascade.addNormalMatches(result, 0, result.matchedProperties().size() - 1);
> 
>     ApplyCascadedPropertyState applyState { this, &cascade, &result };
>+    for (auto it = cascade.customProperties().begin(); it != cascade.customProperties().end(); ++it) {
>+        HashSet<String> referencedProperties;
>+        HashSet<String> visited;
>+        checkCustomPropertyForCycles(it->key, applyState, referencedProperties, visited);
>+    }
>     applyCascadedProperties(firstCSSProperty, lastHighPriorityProperty, applyState);
> 
>     // If our font got dirtied, update it now.
>@@ -638,6 +643,11 @@ std::unique_ptr<RenderStyle> StyleResolver::styleForPage(int pageIndex)
>     cascade.addNormalMatches(result, 0, result.matchedProperties().size() - 1);
> 
>     ApplyCascadedPropertyState applyState { this, &cascade, &result };
>+    for (auto it = cascade.customProperties().begin(); it != cascade.customProperties().end(); ++it) {
>+        HashSet<String> referencedProperties;
>+        HashSet<String> visited;
>+        checkCustomPropertyForCycles(it->key, applyState, referencedProperties, visited);
>+    }
>     applyCascadedProperties(firstCSSProperty, lastHighPriorityProperty, applyState);
> 
>     // If our font got dirtied, update it now.
>@@ -1377,7 +1387,11 @@ void StyleResolver::applyMatchedProperties(const MatchResult& matchResult, const
>         cascade.addImportantMatches(matchResult, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
> 
>         ApplyCascadedPropertyState applyState { this, &cascade, &matchResult };
>-
>+        for (auto it = cascade.customProperties().begin(); it != cascade.customProperties().end(); ++it) {
>+            HashSet<String> referencedProperties;
>+            HashSet<String> visited;
>+            checkCustomPropertyForCycles(it->key, applyState, referencedProperties, visited);
>+        }
>         applyCascadedProperties(CSSPropertyWebkitRubyPosition, CSSPropertyWebkitRubyPosition, applyState);
>         adjustStyleForInterCharacterRuby();
> 
>@@ -1406,7 +1420,11 @@ void StyleResolver::applyMatchedProperties(const MatchResult& matchResult, const
>     cascade.addImportantMatches(matchResult, matchResult.ranges.firstUARule, matchResult.ranges.lastUARule, applyInheritedOnly);
> 
>     ApplyCascadedPropertyState applyState { this, &cascade, &matchResult };
>-
>+    for (auto it = cascade.customProperties().begin(); it != cascade.customProperties().end(); ++it) {
>+        HashSet<String> referencedProperties;
>+        HashSet<String> visited;
>+        checkCustomPropertyForCycles(it->key, applyState, referencedProperties, visited);
>+    }
>     applyCascadedProperties(CSSPropertyWebkitRubyPosition, CSSPropertyWebkitRubyPosition, applyState);
>     adjustStyleForInterCharacterRuby();
> 
>@@ -1635,14 +1653,12 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value, ApplyCascad
> 
>     RefPtr<CSSValue> valueToApply = value;
>     if (value->hasVariableReferences()) {
>-        valueToApply = resolvedVariableValue(id, *value, applyState);
>-        // If appliedProperties already has this id, then we detected a cycle, and this value should be unset.
>-        if (!valueToApply || applyState.appliedProperties.get(id)) {
>-            if (CSSProperty::isInheritedProperty(id))
>-                valueToApply = CSSValuePool::singleton().createInheritedValue();
>-            else
>-                valueToApply = CSSValuePool::singleton().createExplicitInitialValue();
>-        }
>+        bool substitutionValid = true;
>+        valueToApply = resolvedVariableValue(id, *value, applyState, substitutionValid);
>+
>+        // If we detected a cycle, then this value should be unset.
>+        if (!valueToApply || applyState.appliedProperties.get(id))
>+            valueToApply = CSSValuePool::singleton().createUnsetValue();
>     }
> 
>     if (CSSProperty::isDirectionAwareProperty(id)) {
>@@ -1736,10 +1752,10 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value, ApplyCascad
>     StyleBuilder::applyProperty(id, *this, *valueToApply, isInitial, isInherit, customPropertyRegistered);
> }
> 
>-RefPtr<CSSValue> StyleResolver::resolvedVariableValue(CSSPropertyID propID, const CSSValue& value, ApplyCascadedPropertyState& state) const
>+RefPtr<CSSValue> StyleResolver::resolvedVariableValue(CSSPropertyID propID, const CSSValue& value, ApplyCascadedPropertyState& state, bool& substitutionValid) const
> {
>     CSSParser parser(document());
>-    return parser.parseValueWithVariableReferences(propID, value, state);
>+    return parser.parseValueWithVariableReferences(propID, value, state, substitutionValid);
> }
> 
> RefPtr<StyleImage> StyleResolver::styleImage(CSSValue& value)
>@@ -2282,6 +2298,20 @@ void StyleResolver::CascadedProperties::applyDeferredProperties(StyleResolver& r
>         property.apply(resolver, applyState);
> }
> 
>+inline void StyleResolver::setApplyPropertyStateForLinkMatchMask(SelectorChecker::LinkMatchMask index)
>+{
>+    if (index == SelectorChecker::MatchDefault) {
>+        state().setApplyPropertyToRegularStyle(true);
>+        state().setApplyPropertyToVisitedLinkStyle(false);
>+    } else if (index == SelectorChecker::MatchLink) {
>+        state().setApplyPropertyToRegularStyle(true);
>+        state().setApplyPropertyToVisitedLinkStyle(false);
>+    } else if (index == SelectorChecker::MatchVisited) {
>+        state().setApplyPropertyToRegularStyle(false);
>+        state().setApplyPropertyToVisitedLinkStyle(true);
>+    }
>+}
>+
> void StyleResolver::CascadedProperties::Property::apply(StyleResolver& resolver, ApplyCascadedPropertyState& applyState)
> {
>     State& state = resolver.state();
>@@ -2289,8 +2319,7 @@ void StyleResolver::CascadedProperties::Property::apply(StyleResolver& resolver,
>     state.setStyleScopeOrdinal(styleScopeOrdinal);
> 
>     if (cssValue[SelectorChecker::MatchDefault]) {
>-        state.setApplyPropertyToRegularStyle(true);
>-        state.setApplyPropertyToVisitedLinkStyle(false);
>+        resolver.setApplyPropertyStateForLinkMatchMask(SelectorChecker::MatchDefault);
>         resolver.applyProperty(id, cssValue[SelectorChecker::MatchDefault], applyState, SelectorChecker::MatchDefault);
>     }
> 
>@@ -2298,28 +2327,32 @@ void StyleResolver::CascadedProperties::Property::apply(StyleResolver& resolver,
>         return;
> 
>     if (cssValue[SelectorChecker::MatchLink]) {
>-        state.setApplyPropertyToRegularStyle(true);
>-        state.setApplyPropertyToVisitedLinkStyle(false);
>+        resolver.setApplyPropertyStateForLinkMatchMask(SelectorChecker::MatchLink);
>         resolver.applyProperty(id, cssValue[SelectorChecker::MatchLink], applyState, SelectorChecker::MatchLink);
>     }
> 
>     if (cssValue[SelectorChecker::MatchVisited]) {
>-        state.setApplyPropertyToRegularStyle(false);
>-        state.setApplyPropertyToVisitedLinkStyle(true);
>+        resolver.setApplyPropertyStateForLinkMatchMask(SelectorChecker::MatchVisited);
>         resolver.applyProperty(id, cssValue[SelectorChecker::MatchVisited], applyState, SelectorChecker::MatchVisited);
>     }
> 
>-    state.setApplyPropertyToRegularStyle(true);
>-    state.setApplyPropertyToVisitedLinkStyle(false);
>+    resolver.setApplyPropertyStateForLinkMatchMask(SelectorChecker::MatchDefault);
> }
> 
>-void StyleResolver::applyCascadedCustomProperty(const String& name, ApplyCascadedPropertyState& state)
>+void StyleResolver::checkCustomPropertyForCycles(const String& name, ApplyCascadedPropertyState& state, HashSet<String>& referencedProperties, HashSet<String>& visited)
> {
>-    if (state.appliedCustomProperties.contains(name) || !state.cascade->customProperties().contains(name))
>+    // This is an arbitrary limit, to make sure that we don't crash.
>+    if (referencedProperties.size() > 1000)
>+        return;
>+    if (visited.contains(name) || !state.cascade->customProperties().contains(name))
>+        return;
>+
>+    bool inCycle = referencedProperties.contains(name);
>+    if (inCycle && state.appliedCustomProperties.contains(name))
>         return;
> 
>     auto property = state.cascade->customProperties().get(name);
>-    bool inCycle = state.inProgressPropertiesCustom.contains(name);
>+    referencedProperties.add(name);
> 
>     for (auto index : { SelectorChecker::MatchDefault, SelectorChecker::MatchLink, SelectorChecker::MatchVisited }) {
>         if (!property.cssValue[index])
>@@ -2327,48 +2360,37 @@ void StyleResolver::applyCascadedCustomProperty(const String& name, ApplyCascade
>         if (index != SelectorChecker::MatchDefault && this->state().style()->insideLink() == InsideLink::NotInside)
>             continue;
> 
>-        Ref<CSSCustomPropertyValue> valueToApply = CSSCustomPropertyValue::create(downcast<CSSCustomPropertyValue>(*property.cssValue[index]));
>-
>         if (inCycle) {
>-            state.appliedCustomProperties.add(name); // Make sure we do not try to apply this property again while resolving it.
>-            valueToApply = CSSCustomPropertyValue::createWithID(name, CSSValueInvalid);
>+            setApplyPropertyStateForLinkMatchMask(index);
>+            auto value = CSSCustomPropertyValue::createWithID(name, CSSValueInvalid);
>+            applyProperty(CSSPropertyCustom, value.ptr(), state, index);
>+            state.appliedCustomProperties.add(name);
>+            continue;
>         }
> 
>-        state.inProgressPropertiesCustom.add(name);
>-
>-        if (WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(valueToApply->value())) {
>-            RefPtr<CSSValue> parsedValue = resolvedVariableValue(CSSPropertyCustom, valueToApply.get(), state);
>-
>-            if (state.appliedCustomProperties.contains(name))
>-                return; // There was a cycle and the value was reset, so bail.
>-
>-            if (!parsedValue)
>-                parsedValue = CSSCustomPropertyValue::createWithID(name, CSSValueUnset);
>+        const CSSCustomPropertyValue& value = downcast<CSSCustomPropertyValue>(*property.cssValue[index]);
>+        if (!WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(value.value()))
>+            continue;
> 
>-            valueToApply = downcast<CSSCustomPropertyValue>(*parsedValue);
>-        }
>+        WTF::get<Ref<CSSVariableReferenceValue>>(value.value())->checkReferencedCustomPropertiesForCycles(state, referencedProperties, visited);
>+    }
> 
>-        if (state.inProgressPropertiesCustom.contains(name)) {
>-            if (index == SelectorChecker::MatchDefault) {
>-                this->state().setApplyPropertyToRegularStyle(true);
>-                this->state().setApplyPropertyToVisitedLinkStyle(false);
>-            }
>+    visited.add(name);
>+    referencedProperties.remove(name);
>+}
> 
>-            if (index == SelectorChecker::MatchLink) {
>-                this->state().setApplyPropertyToRegularStyle(true);
>-                this->state().setApplyPropertyToVisitedLinkStyle(false);
>-            }
>+void StyleResolver::applyCascadedCustomProperty(const String& name, ApplyCascadedPropertyState& state)
>+{
>+    // This is an arbitrary limit, to make sure that we don't crash.
>+    if (state.inProgressPropertiesCustom.size() > 1000 || state.appliedCustomProperties.size() > 1000)
>+        return;
> 
>-            if (index == SelectorChecker::MatchVisited) {
>-                this->state().setApplyPropertyToRegularStyle(false);
>-                this->state().setApplyPropertyToVisitedLinkStyle(true);
>-            }
>-            applyProperty(CSSPropertyCustom, valueToApply.ptr(), state, index);
>-        }
>-    }
>+    ASSERT(!state.inProgressPropertiesCustom.contains(name));
>+    if (state.appliedCustomProperties.contains(name) || !state.cascade->customProperties().contains(name) || state.inProgressPropertiesCustom.contains(name))
>+        return;
> 
>-    state.inProgressPropertiesCustom.remove(name);
>-    state.appliedCustomProperties.add(name);
>+    auto property = state.cascade->customProperties().get(name);
>+    state.inProgressPropertiesCustom.add(name);
> 
>     for (auto index : { SelectorChecker::MatchDefault, SelectorChecker::MatchLink, SelectorChecker::MatchVisited }) {
>         if (!property.cssValue[index])
>@@ -2378,11 +2400,24 @@ void StyleResolver::applyCascadedCustomProperty(const String& name, ApplyCascade
> 
>         Ref<CSSCustomPropertyValue> valueToApply = CSSCustomPropertyValue::create(downcast<CSSCustomPropertyValue>(*property.cssValue[index]));
> 
>-        if (inCycle && WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(valueToApply->value())) {
>-            // Resolve this value so that we reset its dependencies.
>-            resolvedVariableValue(CSSPropertyCustom, valueToApply.get(), state);
>+        if (WTF::holds_alternative<Ref<CSSVariableReferenceValue>>(valueToApply->value())) {
>+            bool substitutionValid = true;
>+            RefPtr<CSSValue> parsedValue = resolvedVariableValue(CSSPropertyCustom, valueToApply.get(), state, substitutionValid);
>+
>+            // If we successfully substituted every variable, but they had invalid values, then this is set to the initial value.
>+            // Otherwise, this is unset.
>+            if (!parsedValue || !is<CSSCustomPropertyValue>(parsedValue))
>+                parsedValue = CSSCustomPropertyValue::createWithID(name, substitutionValid ? CSSValueInitial : CSSValueUnset);
>+
>+            valueToApply = downcast<CSSCustomPropertyValue>(*parsedValue);
>         }
>+
>+        setApplyPropertyStateForLinkMatchMask(index);
>+        applyProperty(CSSPropertyCustom, valueToApply.ptr(), state, index);
>     }
>+
>+    state.appliedCustomProperties.add(name);
>+    state.inProgressPropertiesCustom.remove(name);
> }
> 
> void StyleResolver::applyCascadedProperties(int firstProperty, int lastProperty, ApplyCascadedPropertyState& state)
>diff --git a/Source/WebCore/css/StyleResolver.h b/Source/WebCore/css/StyleResolver.h
>index 438e5c877fb43f44de572e6ede3d4c20c4738b01..c2200aaad039d985bf7683b4ccdc185b8310dfbe 100644
>--- a/Source/WebCore/css/StyleResolver.h
>+++ b/Source/WebCore/css/StyleResolver.h
>@@ -308,9 +308,12 @@ public:
>     };
> 
>     void applyCascadedProperties(int firstProperty, int lastProperty, ApplyCascadedPropertyState&);
>+    void checkCustomPropertyForCycles(const String& name, ApplyCascadedPropertyState&, HashSet<String>& referencedProperties, HashSet<String>& visited);
>     void applyCascadedCustomProperty(const String& name, ApplyCascadedPropertyState&);
> 
> private:
>+    void setApplyPropertyStateForLinkMatchMask(SelectorChecker::LinkMatchMask);
>+
>     // This function fixes up the default font size if it detects that the current generic font family has changed. -dwh
>     void checkForGenericFamilyChange(RenderStyle*, const RenderStyle* parentStyle);
>     void checkForZoomChange(RenderStyle*, const RenderStyle* parentStyle);
>@@ -465,7 +468,7 @@ public:
>     void setWritingMode(WritingMode writingMode) { m_state.setWritingMode(writingMode); }
>     void setTextOrientation(TextOrientation textOrientation) { m_state.setTextOrientation(textOrientation); }
> 
>-    RefPtr<CSSValue> resolvedVariableValue(CSSPropertyID, const CSSValue&, ApplyCascadedPropertyState&) const;
>+    RefPtr<CSSValue> resolvedVariableValue(CSSPropertyID, const CSSValue&, ApplyCascadedPropertyState&, bool& substitutionValid) const;
> 
> private:
>     void cacheBorderAndBackground();
>diff --git a/Source/WebCore/css/parser/CSSParser.cpp b/Source/WebCore/css/parser/CSSParser.cpp
>index 0d6aef08f924f07889d2ca14108ce57a1845bdd5..e5e7f34ae73b90371e9cb027e4f96f509c4cd017 100644
>--- a/Source/WebCore/css/parser/CSSParser.cpp
>+++ b/Source/WebCore/css/parser/CSSParser.cpp
>@@ -178,7 +178,7 @@ void CSSParser::parseDeclarationForInspector(const CSSParserContext& context, co
>     CSSParserImpl::parseDeclarationListForInspector(string, context, observer);
> }
> 
>-RefPtr<CSSValue> CSSParser::parseValueWithVariableReferences(CSSPropertyID propID, const CSSValue& value, ApplyCascadedPropertyState& state)
>+RefPtr<CSSValue> CSSParser::parseValueWithVariableReferences(CSSPropertyID propID, const CSSValue& value, ApplyCascadedPropertyState& state, bool& substitutionValid)
> {
>     ASSERT((propID == CSSPropertyCustom && value.isCustomPropertyValue()) || (propID != CSSPropertyCustom && !value.isCustomPropertyValue()));
>     auto& style = *state.styleResolver->style();
>@@ -194,7 +194,7 @@ RefPtr<CSSValue> CSSParser::parseValueWithVariableReferences(CSSPropertyID propI
>             shorthandID = CSSProperty::resolveDirectionAwareProperty(shorthandID, direction, writingMode);
>         CSSVariableReferenceValue* shorthandValue = pendingSubstitution.shorthandValue();
> 
>-        auto resolvedData = shorthandValue->resolveVariableReferences(state);
>+        auto resolvedData = shorthandValue->resolveVariableReferences(state, substitutionValid);
>         if (!resolvedData)
>             return nullptr;
>         Vector<CSSParserToken> resolvedTokens = resolvedData->tokens();
>@@ -213,7 +213,7 @@ RefPtr<CSSValue> CSSParser::parseValueWithVariableReferences(CSSPropertyID propI
> 
>     if (value.isVariableReferenceValue()) {
>         const CSSVariableReferenceValue& valueWithReferences = downcast<CSSVariableReferenceValue>(value);
>-        auto resolvedData = valueWithReferences.resolveVariableReferences(state);
>+        auto resolvedData = valueWithReferences.resolveVariableReferences(state, substitutionValid);
>         if (!resolvedData)
>             return nullptr;
>         return CSSPropertyParser::parseSingleValue(propID, resolvedData->tokens(), m_context);
>@@ -225,7 +225,7 @@ RefPtr<CSSValue> CSSParser::parseValueWithVariableReferences(CSSPropertyID propI
>     auto& name = downcast<CSSCustomPropertyValue>(value).name();
>     auto* registered = state.styleResolver->document().getCSSRegisteredCustomPropertySet().get(name);
>     auto& syntax = registered ? registered->syntax : "*";
>-    auto resolvedData = valueWithReferences.resolveVariableReferences(state);
>+    auto resolvedData = valueWithReferences.resolveVariableReferences(state, substitutionValid);
> 
>     if (!resolvedData)
>         return nullptr;
>diff --git a/Source/WebCore/css/parser/CSSParser.h b/Source/WebCore/css/parser/CSSParser.h
>index 47063cdfb9a255c56bfdc45f6ce4b036441100fa..e835c8622981dcbe37755fd4a48d2425221d9ef0 100644
>--- a/Source/WebCore/css/parser/CSSParser.h
>+++ b/Source/WebCore/css/parser/CSSParser.h
>@@ -78,7 +78,7 @@ public:
> 
>     void parseSelector(const String&, CSSSelectorList&);
> 
>-    RefPtr<CSSValue> parseValueWithVariableReferences(CSSPropertyID, const CSSValue&, ApplyCascadedPropertyState&);
>+    RefPtr<CSSValue> parseValueWithVariableReferences(CSSPropertyID, const CSSValue&, ApplyCascadedPropertyState&, bool& substitutionValid);
> 
>     static Color parseColor(const String&, bool strict = false);
>     static Color parseSystemColor(const String&, const CSSParserContext*);
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index be7c47b2803f102e8fbf03cc296f332b57427ee8..0041104620c4c47325153af9734ffaa641d7f3e8 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,118 @@
>+2018-12-21  Justin Michaud  <justin_michaud@apple.com>
>+
>+        Fix CSS Variable cycle detection and import CSS Variables web platform tests
>+        https://bugs.webkit.org/show_bug.cgi?id=192828
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * resources/import-expectations.json:
>+        * web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt:
>+        * web-platform-tests/css/css-variables/META.yml: Added.
>+        * web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001-expected.html: Added.
>+        * web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html: Added.
>+        * web-platform-tests/css/css-variables/css-vars-custom-property-inheritance-expected.html: Added.
>+        * web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html: Added.
>+        * web-platform-tests/css/css-variables/resources/variable-reference-refresh-iframe.css: Added.
>+        (#testElement):
>+        * web-platform-tests/css/css-variables/resources/w3c-import.log: Added.
>+        * web-platform-tests/css/css-variables/test_variable_legal_values-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/test_variable_legal_values.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-from-to-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-from-to.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-over-transition-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-over-transition.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe.html: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-to-only-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-animation-to-only.html: Added.
>+        * web-platform-tests/css/css-variables/variable-created-document-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-created-document.html: Added.
>+        * web-platform-tests/css/css-variables/variable-created-element-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-created-element.html: Added.
>+        * web-platform-tests/css/css-variables/variable-cssText-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-cssText.html: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize.html: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-cascading-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-cascading.html: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-keywords-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-definition-keywords.html: Added.
>+        * web-platform-tests/css/css-variables/variable-definition.html: Added.
>+        * web-platform-tests/css/css-variables/variable-exponential-blowup-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-exponential-blowup.html: Added.
>+        * web-platform-tests/css/css-variables/variable-first-letter-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-first-letter.html: Added.
>+        * web-platform-tests/css/css-variables/variable-first-line-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-first-line.html: Added.
>+        * web-platform-tests/css/css-variables/variable-generated-content-dynamic-001-expected.html: Added.
>+        * web-platform-tests/css/css-variables/variable-generated-content-dynamic-001.html: Added.
>+        * web-platform-tests/css/css-variables/variable-invalidation-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-invalidation.html: Added.
>+        * web-platform-tests/css/css-variables/variable-presentation-attribute-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-presentation-attribute.html: Added.
>+        * web-platform-tests/css/css-variables/variable-pseudo-element-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-pseudo-element.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-cssom-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-cssom.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-refresh-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-refresh.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-shorthands-cssom-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-shorthands-cssom.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-shorthands-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-shorthands.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-variable-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-variable.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-without-whitespace-expected.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference-without-whitespace.html: Added.
>+        * web-platform-tests/css/css-variables/variable-reference.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-background-properties-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-background-properties.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-basic-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-basic.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-filters-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-filters.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-replaced-size-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-replaced-size.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-shadow-properties-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-shorthands-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-shorthands.html: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-variable-declaration-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-from-no-value-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-from-no-value.html: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-to-no-value-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-to-no-value.html: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value.html: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all.html: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html: Added.
>+        * web-platform-tests/css/css-variables/vars-background-shorthand-001-expected.html: Added.
>+        * web-platform-tests/css/css-variables/vars-background-shorthand-001.html: Added.
>+        * web-platform-tests/css/css-variables/vars-border-shorthand-serialize-expected.txt: Added.
>+        * web-platform-tests/css/css-variables/vars-border-shorthand-serialize.html: Added.
>+        * web-platform-tests/css/css-variables/vars-font-shorthand-001-expected.html: Added.
>+        * web-platform-tests/css/css-variables/vars-font-shorthand-001.html: Added.
>+        * web-platform-tests/css/css-variables/w3c-import.log: Added.
>+
> 2018-12-21  Manuel Rego Casasnovas  <rego@igalia.com>
> 
>         [css-grid] Fix percentages in relative offsets for grid items
>diff --git a/LayoutTests/imported/w3c/resources/import-expectations.json b/LayoutTests/imported/w3c/resources/import-expectations.json
>index 0a92e1c3aaa4b9b9d0df1e8e1b0f27358821c88a..d6ee4bee4223e46bab62a5b043152d6e3433cd3f 100644
>--- a/LayoutTests/imported/w3c/resources/import-expectations.json
>+++ b/LayoutTests/imported/w3c/resources/import-expectations.json
>@@ -79,6 +79,7 @@
>     "web-platform-tests/css/css-shapes/test-plan/index.html": "skip", 
>     "web-platform-tests/css/css-text": "import", 
>     "web-platform-tests/css/css-ui": "import", 
>+    "web-platform-tests/css/css-variables": "import", 
>     "web-platform-tests/css/cssom": "import", 
>     "web-platform-tests/css/geometry/": "import", 
>     "web-platform-tests/css/mediaqueries": "import", 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt
>index d2234f08622ad71dca199b5e19f197681ebda389..81fe679030b734107f1a15b649d69282fddb3c3b 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance-expected.txt
>@@ -3,7 +3,7 @@ PASS Registered properties are correctly inherited (or not) depending on the inh
> PASS Explicitly inheriting from a parent with an invalid value results in initial value. 
> PASS Explicitly inheriting from a parent with no value results in initial value. 
> PASS Reference to undefined variable results in inherited value 
>-PASS Reference to syntax-incompatible variable results in inherited value 
>+FAIL Reference to syntax-incompatible variable results in inherited value assert_equals: expected "42px" but got "0px"
> PASS Font-relative units are absolutized before before inheritance 
> PASS Calc expressions are resolved before inheritance 
> 
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/META.yml b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/META.yml
>new file mode 100644
>index 0000000000000000000000000000000000000000..a1747aadc086e75733c15242826d7631b0c95ead
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/META.yml
>@@ -0,0 +1,5 @@
>+spec: https://drafts.csswg.org/css-variables/
>+suggested_reviewers:
>+  - dbaron
>+  - svgeesus
>+  - tabatkins
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..30bad67f85a38737a408350e46d7236a3e4462e3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001-expected.html
>@@ -0,0 +1,21 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables Test: custom property names are case-sensitive</title>
>+    <meta charset="UTF-8">
>+    <link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
>+    <style type="text/css">
>+        .blue-good-1  { color: #22e; }
>+        .blue-good-2  { color: #22e; }
>+    </style>
>+</head>
>+<body>
>+    <h2 class="blue-good-1">Valid CSS Variable Names</h2>
>+    <p class="blue-good-1">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
>+    <p class="blue-good-2">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
>+    <br>
>+    <h2>Invalid CSS Variable Names</h2>
>+    <p>This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
>+    <p>This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6644175e5533a19ef4125dd8aecd833f1be12c39
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html
>@@ -0,0 +1,37 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables Test: custom property names are case-sensitive</title>
>+    <meta charset="UTF-8">
>+    <link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
>+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
>+    <meta name="assert" content="Custom property names are case-sensitive">
>+    <link rel="match" href="reference/css-vars-custom-property-case-sensitive-ref.html">
>+    <style type="text/css">
>+        :root {
>+            --veryblue:   #22e;
>+            --AlsoBlue:   #22e;
>+
>+            --veryred:   #f00;
>+            --AlsoRed:   #f00;
>+        }
>+
>+        /* These match the case of the declarations */
>+        .blue-good-1  { color: var(--veryblue); }
>+        .blue-good-2  { color: var(--AlsoBlue); }
>+
>+        /* These DO NOT match the case of the declarations */
>+        .red-bad-1    { color: var(--VeryRed);  }
>+        .red-bad-2    { color: var(--alsored);  }
>+    </style>
>+</head>
>+<body>
>+    <h2 class="blue-good-1">Valid CSS Variable Names</h2>
>+    <p class="blue-good-1">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
>+    <p class="blue-good-2">This paragraph is styled using a valid CSS Variable name. It should be blue.</p>
>+    <br>
>+    <h2 class="red-bad-1">Invalid CSS Variable Names</h2>
>+    <p class="red-bad-1">This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
>+    <p class="red-bad-2">This paragraph is styled using an invalid CSS Variable name. Fail if red.</p>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..fcacb7bb23d1ab8c1288b2de072416a7c7ee8623
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance-expected.html
>@@ -0,0 +1,17 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <meta charset="utf-8">
>+    <title>CSS Variables Test: custom properties use normal inheritance and cascade rules</title>
>+    <link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
>+    <style type="text/css">
>+        * { color: #1c1; }
>+    </style>
>+</head>
>+<body>
>+    <p>Green</p>
>+    <p>Green</p>
>+    <p>Green</p>
>+    <p>The test passes if everything is green. Any red means the test failed.</p>
>+</body>
>+</html>
>\ No newline at end of file
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..fc6cfa0ed40cdd6e9f973e5da150afff9d992e33
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html
>@@ -0,0 +1,30 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <meta charset="utf-8">
>+    <title>CSS Variables Test: custom properties use normal inheritance and cascade rules</title>
>+    <link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com">
>+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
>+    <meta name="assert" content="custom properties are resolved with the normal inheritance and cascade rules">
>+    <link rel="match" href="reference/css-vars-custom-property-inheritance-ref.html">
>+    <style type="text/css">
>+
>+        /* test cascade importance */
>+        :root { --color: #1c1 !important; }
>+        :root { --color: red; }
>+
>+        /* test cascade order */
>+        * { color: red; }
>+
>+        /* test cascade order */
>+        * { color: var(--color); }
>+
>+    </style>
>+</head>
>+<body>
>+    <p>Green</p>
>+    <p>Green</p>
>+    <p>Green</p>
>+    <p>The test passes if everything is green. Any red means the test failed.</p>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/variable-reference-refresh-iframe.css b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/variable-reference-refresh-iframe.css
>new file mode 100644
>index 0000000000000000000000000000000000000000..7a10918d0014be9b941908fc434a91f694a537c0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/variable-reference-refresh-iframe.css
>@@ -0,0 +1,5 @@
>+#testElement
>+{
>+    --color: green;
>+    color: var(--color);
>+}
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/w3c-import.log
>new file mode 100644
>index 0000000000000000000000000000000000000000..dcca632388e4539a9fdea84156523b4e65fab8b1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/w3c-import.log
>@@ -0,0 +1,17 @@
>+The tests in this directory were imported from the W3C repository.
>+Do NOT modify these tests directly in WebKit.
>+Instead, create a pull request on the WPT github:
>+	https://github.com/web-platform-tests/wpt
>+
>+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
>+
>+Do NOT modify or remove this file.
>+
>+------------------------------------------------------------------------
>+Properties requiring vendor prefixes:
>+None
>+Property values requiring vendor prefixes:
>+None
>+------------------------------------------------------------------------
>+List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/resources/variable-reference-refresh-iframe.css
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..caeec733ff6241ed84c68292d49d280a638238db
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values-expected.txt
>@@ -0,0 +1,25 @@
>+
>+PASS percentage 
>+PASS number 
>+PASS length 
>+PASS time 
>+PASS function 
>+PASS nested_function 
>+PASS parentheses 
>+PASS braces 
>+PASS brackets 
>+PASS at_keyword_unknown 
>+PASS at_keyword_known 
>+PASS at_keyword_unknown_and_block 
>+PASS at_keyword_known_and_block 
>+PASS unbalanced_close_bracket_at_toplevel 
>+PASS unbalanced_close_paren_at_toplevel 
>+PASS unbalanced_close_bracket_in_something_balanced 
>+PASS unbalanced_close_paren_in_something_balanced 
>+PASS unbalanced_close_brace_in_something_balanced 
>+PASS CDO_at_top_level 
>+PASS CDC_at_top_level 
>+PASS semicolon_not_at_top_level_value_unused 
>+PASS CDO_not_at_top_level_value_unused 
>+PASS CDC_not_at_top_level_value_unused 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..1d86c0834ccb1da7965edf56f9a4aefc0a041421
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values.html
>@@ -0,0 +1,93 @@
>+<!DOCTYPE HTML>
>+<html>
>+<head>
>+  <title>CSS Variables Allowed Syntax</title>
>+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
>+  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
>+  <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
>+  <meta name="assert" content='The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21].'>
>+  <script src="/resources/testharness.js"></script>
>+  <script src="/resources/testharnessreport.js"></script>
>+<style id="style"></style>
>+</head>
>+<body onload="run()">
>+<div id=log></div>
>+<div id="test"></div>
>+<script>
>+setup({ "explicit_done": true });
>+
>+function run() {
>+  // Setup the iframe
>+  var style = document.getElementById("style");
>+  var styleText = document.createTextNode("");
>+  style.appendChild(styleText);
>+  var test_cs = window.getComputedStyle(document.getElementById("test"), "");
>+
>+  var initial_cs = test_cs.backgroundColor;
>+  styleText.data = "#test { background-color: green }";
>+  var green_cs = test_cs.backgroundColor;
>+  styleText.data = "#test { background-color: red }";
>+  var red_cs = test_cs.backgroundColor;
>+
>+  function description_to_name(description) {
>+    return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, "");
>+  }
>+
>+  function assert_allowed_variable_value(value, description) {
>+    test(function() {
>+           styleText.data = "#test { \n" +
>+                            "  --test: red;\n" +
>+                            "  --test: " + value + ";\n" +
>+                            "  background-color: red;\n" +
>+                            "  background-color: var(--test);\n" +
>+                            "}";
>+           assert_not_equals(initial_cs, red_cs);
>+           assert_equals(initial_cs, test_cs.backgroundColor);
>+         },
>+         description_to_name(description));
>+  }
>+
>+  function assert_disallowed_balanced_variable_value(value, description) {
>+    test(function() {
>+           styleText.data = "#test { \n" +
>+                            "  --test: green;\n" +
>+                            "  --test: " + value + ";\n" +
>+                            "  background-color: red;\n" +
>+                            "  background-color: var(--test);\n" +
>+                            "}";
>+           assert_not_equals(green_cs, red_cs);
>+           assert_equals(green_cs, test_cs.backgroundColor);
>+         },
>+         description_to_name(description));
>+  }
>+
>+  assert_allowed_variable_value("25%", "percentage");
>+  assert_allowed_variable_value("37", "number");
>+  assert_allowed_variable_value("12em", "length");
>+  assert_allowed_variable_value("75ms", "time");
>+  assert_allowed_variable_value("foo()", "function");
>+  assert_allowed_variable_value("foo(bar())", "nested function");
>+  assert_allowed_variable_value("( )", "parentheses");
>+  assert_allowed_variable_value("{ }", "braces");
>+  assert_allowed_variable_value("[ ]", "brackets");
>+  assert_allowed_variable_value("@foobar", "at-keyword (unknown)");
>+  assert_allowed_variable_value("@media", "at-keyword (known)");
>+  assert_allowed_variable_value("@foobar {}", "at-keyword (unknown) and block");
>+  assert_allowed_variable_value("@media {}", "at-keyword (known) and block");
>+  assert_disallowed_balanced_variable_value("]", "unbalanced close bracket at toplevel");
>+  assert_disallowed_balanced_variable_value(")", "unbalanced close paren at toplevel");
>+  assert_disallowed_balanced_variable_value("(])", "unbalanced close bracket in something balanced");
>+  assert_disallowed_balanced_variable_value("[)]", "unbalanced close paren in something balanced");
>+  assert_disallowed_balanced_variable_value("(})", "unbalanced close brace in something balanced");
>+  assert_allowed_variable_value("", "CDC at top level");
>+  assert_allowed_variable_value("(;)", "semicolon not at top level (value -> unused)");
>+  assert_allowed_variable_value("()", "CDC not at top level (value -> unused)");
>+
>+  done();
>+}
>+
>+</script>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..5a663fc5a0a96d0108397b99ec7dbc72774e8684
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to-expected.txt
>@@ -0,0 +1,7 @@
>+This text should animate from blue to green over a period of 1 second.
>+
>+FAIL Verify CSS variable value before animation assert_equals: --value is blue before animation runs expected "blue" but got "red"
>+FAIL Verify substituted color value before animation assert_equals: color is blue before animation runs expected "rgb(0, 0, 255)" but got "rgb(255, 0, 0)"
>+FAIL Verify CSS variable value after animation assert_equals: --value is green after animation runs expected "green" but got "red"
>+FAIL Verify substituted color value after animation assert_equals: color is green after animation runs expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..bcb42566fae16d5da3218444eb7516769a1c0747
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/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/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..bd01c726e6244d6b5994de67e36a5fa3e1c54aa1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition-expected.txt
>@@ -0,0 +1,7 @@
>+This text should animate from blue to green over a period of 1 second. The transition is not visible because the animation overrides it.
>+
>+FAIL Verify CSS variable value before animation assert_equals: --value is blue before animation runs expected "blue" but got "red"
>+FAIL Verify substituted color value before animation assert_equals: color is blue before animation runs expected "rgb(0, 0, 255)" but got "rgb(255, 0, 0)"
>+FAIL Verify CSS variable value after animation assert_equals: --value is green after animation runs expected "green" but got "black"
>+FAIL Verify substituted color value after animation assert_equals: color is green after animation runs expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..f0ade7c7110ae627d2e8744a0d6a15bf3b838eb7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/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/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d41a7f898f93681a8f3a7be7d41f85723e465690
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-expected.txt
>@@ -0,0 +1,5 @@
>+This text should animate from blue to green over a period of 1 second.
>+
>+PASS Verify color before animation 
>+PASS Verify color after animation 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..ad6cf843731c4570114a2d683cc71f9b89c2dcd1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand-expected.txt
>@@ -0,0 +1,5 @@
>+The border around this text should animate from blue to green over a period of 1 second.
>+
>+PASS Verify border-bottom-color before animation 
>+PASS Verify border-bottom-color after animation 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..2054d351782da63ae0bf8d02085e8d2e8e57aa17
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/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/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..808a32200f3ece25d7586336b8e5fabaeeaa2ad1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform-expected.txt
>@@ -0,0 +1,5 @@
>+This text should scale from half size to double size over a period of 1 second.
>+
>+PASS Verify transform before animation 
>+PASS Verify transform after animation 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..20e04e872c915c831d407796af7383b6cc715f97
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/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/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..b6ad0a247757824e7fd06fd86c07637a0308ee67
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/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>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d41a7f898f93681a8f3a7be7d41f85723e465690
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-expected.txt
>@@ -0,0 +1,5 @@
>+This text should animate from blue to green over a period of 1 second.
>+
>+PASS Verify color before animation 
>+PASS Verify color after animation 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d41a7f898f93681a8f3a7be7d41f85723e465690
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback-expected.txt
>@@ -0,0 +1,5 @@
>+This text should animate from blue to green over a period of 1 second.
>+
>+PASS Verify color before animation 
>+PASS Verify color after animation 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..e1b3a94dc93ace74b1b04804b5b172d745bf1a16
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html
>@@ -0,0 +1,71 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Animation - Substitute Within Keyframe - Fallback</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">
>+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
>+    <meta name="assert" content='The --endColor does the 50% flip and supports the fallback syntax'>
>+
>+    <style>
>+        @keyframes coloranim
>+        {
>+            from { color: blue; }
>+            to { --endColor: var(--nonexistent, green); 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: red;
>+        }
>+    </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>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d41a7f898f93681a8f3a7be7d41f85723e465690
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple-expected.txt
>@@ -0,0 +1,5 @@
>+This text should animate from blue to green over a period of 1 second.
>+
>+PASS Verify color before animation 
>+PASS Verify color after animation 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..263aaf38aec4e171bf069f74ba6b042c1c3f42d6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html
>@@ -0,0 +1,70 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Animation - Substitute Within Keyframe - Multiple Substitution</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 { color: blue; }
>+            to { --myColor: green; --endColor: var(--myColor); 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;
>+            --myColor: red;
>+            --endColor: red;
>+        }
>+    </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>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a01d018d1414a5909bad186c7d8972c5f8d1be81
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe.html
>@@ -0,0 +1,69 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Animation - Substitute Within Keyframe</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 { color: blue; }
>+            to { --endColor: green; 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: red;
>+        }
>+    </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>
>\ No newline at end of file
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..6a52d6b789ec1f8f670987e09ba866baeb51e69e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only-expected.txt
>@@ -0,0 +1,5 @@
>+This text should animate from blue to green over a period of 1 second.
>+
>+PASS Verify CSS variable value before animation 
>+FAIL Verify CSS variable value after animation assert_equals: --value is green after animation runs expected "green" but got "blue"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6f5ffd17eadf336fc1dd703ab80d504324b3689b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only.html
>@@ -0,0 +1,66 @@
>+<!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
>+        {
>+            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;
>+        }
>+        #target
>+        {
>+            --value: blue;
>+        }
>+        #target span
>+        {
>+            color: var(--value);
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target"><span>This text should animate from blue to green over a period of 1 second.</span></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");
>+
>+    var animationTest = async_test("Verify CSS variable value 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("--value").trim(), "green", "--value is green after animation runs")
>+            animationTest.done();
>+            }));
>+
>+        // Trigger animation
>+        document.getElementById("target").style.animationPlayState = "running";
>+    });
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..eb66c94e3e481f322ddf3db015e800acf859727c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document-expected.txt
>@@ -0,0 +1,5 @@
>+This text should be green.
>+
>+PASS Variable definition appearing in a created document should work once spliced into the creating document 
>+PASS Variable reference appearing in a created document should work once spliced into the creating document 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9ccebf841529dc8b29aa92a0f1c66de452a6b8c2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document.html
>@@ -0,0 +1,35 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Variable added to created document</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <div id="target">This text should be green.</div>
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        var workDocument = document.implementation.createHTMLDocument("");
>+        workDocument.documentElement.innerHTML = "<style id='style'>#target { --c: rgb(0, 136, 0); color: var(--c) }</style>";
>+        document.head.appendChild(workDocument.getElementById("style"));
>+
>+        test( function () {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
>+        }, "Variable definition appearing in a created document should work once spliced into the creating document");
>+
>+        test( function () {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 136, 0)");
>+        }, "Variable reference appearing in a created document should work once spliced into the creating document");
>+
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..2e268b4c868756dcff942fe5d0a29a406955427c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element-expected.txt
>@@ -0,0 +1,6 @@
>+This text should be green.
>+
>+PASS Specified variable value appearing in a created element's inline style should work once spliced into the creating document 
>+PASS Computed variable value appearing in a created element's inline style should work once spliced into the creating document 
>+PASS Variable reference appearing in a created element's inline style should work once spliced into the creating document 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..61037e5498f944039c797c5a45132ac757834cdf
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element.html
>@@ -0,0 +1,40 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Variable on created element</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        var newDiv = document.createElement("div");
>+        newDiv.appendChild(document.createTextNode("This text should be green."));
>+        newDiv.setAttribute("id", "target");
>+        newDiv.setAttribute("style", "--c: rgb(0, 136, 0); color: var(--c)");
>+        document.body.insertBefore(newDiv, document.body.firstChild);
>+
>+        test( function () {
>+            assert_equals(document.getElementById("target").style.getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
>+        }, "Specified variable value appearing in a created element's inline style should work once spliced into the creating document");
>+
>+        test( function () {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--c").trim(), "rgb(0, 136, 0)");
>+        }, "Computed variable value appearing in a created element's inline style should work once spliced into the creating document");
>+
>+        test( function () {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 136, 0)");
>+        }, "Variable reference appearing in a created element's inline style should work once spliced into the creating document");
>+
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..5bd218bf52f26e5ec16d8eb8670de604e7348184
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText-expected.txt
>@@ -0,0 +1,12 @@
>+
>+FAIL target1 assert_equals: expected "--var: var1;" but got "--var:  var1;"
>+PASS target2 
>+PASS target3 
>+PASS target4 
>+PASS target5 
>+FAIL target6 assert_equals: expected "background: green;" but got "background-color: green; background-position: initial initial; background-repeat: initial initial;"
>+PASS target7 
>+PASS target8 
>+FAIL target9 assert_equals: expected "margin-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;" but got "margin: var(--prop);"
>+PASS target10 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..b61d29746f0d54418e74cad5dfc661d591425558
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText.html
>@@ -0,0 +1,53 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Parse, store, and serialize CSS variable (thorugh css Text)</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/#serializing-custom-props">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+
>+<div id="target1" style="--var: var1;"></div>
>+<div id="target2" style="margin: var(--prop);"></div>
>+<div id="target3" style="background: var(--prop);"></div>
>+<div id="target4" style="margin: var(--prop) !important;"></div>
>+<div id="target5" style="background: var(--prop) !important;"></div>
>+<div id="target6" style="background: var(--prop); background: green;"></div>
>+<div id="target7" style="background: green; background: var(--prop);"></div>
>+<div id="target8" style="color: green; color: var(--prop);"></div>
>+<div id="target9" style="margin: var(--prop); margin-top: 10px"></div>
>+<div id="target10"style="expando: var(--prop);"></div>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    var testcases = [
>+        { element: "target1",   expectedCssText: "--var: var1;" },
>+        { element: "target2",   expectedCssText: "margin: var(--prop);" },
>+        { element: "target3",   expectedCssText: "background: var(--prop);" },
>+        { element: "target4",   expectedCssText: "margin: var(--prop)  !important;" },
>+        { element: "target5",   expectedCssText: "background: var(--prop)  !important;" },
>+        { element: "target6",   expectedCssText: "background: green;" },
>+        { element: "target7",   expectedCssText: "background: var(--prop);" },
>+        { element: "target8",   expectedCssText: "color: var(--prop);" },
>+        { element: "target9",   expectedCssText: "margin-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;" },
>+        { element: "target10",  expectedCssText: "" }
>+    ];
>+
>+    testcases.forEach(function (testcase) {
>+        test( function () {
>+            var div = document.getElementById(testcase.element);
>+            var actualCssText = div.style.cssText;
>+            assert_equals(actualCssText, testcase.expectedCssText);
>+        }, testcase.element);
>+    });
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..0a4db98d85df6c0f967128762fb7914e1d680174
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize-expected.txt
>@@ -0,0 +1,3 @@
>+
>+PASS border-color should serialize to empty when border shorthand references a variable 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c3f8e58fa53dbef52e0998a0c385869dd95f8d12
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize.html
>@@ -0,0 +1,27 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Variables - border shorthand set, serialize border-color</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/#variables-in-shorthands">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <div id="target" style="border: var(--borderwidth) solid black"></div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        test(function() {
>+            var target = document.getElementById("target");
>+            assert_equals(target.style.getPropertyValue("border-color"), "");
>+        }, "border-color should serialize to empty when border shorthand references a variable");
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..9be5b3afad7825b132526cb51c75b78f18497824
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading-expected.txt
>@@ -0,0 +1,11 @@
>+
>+PASS testing cascaded CSS Variables on div 't0' 
>+PASS testing cascaded CSS Variables on div 't1a' 
>+PASS testing cascaded CSS Variables on div 't1b' 
>+PASS testing cascaded CSS Variables on div 't1c' 
>+PASS testing cascaded CSS Variables on div 't1d' 
>+PASS testing cascaded CSS Variables on div 't2a' 
>+PASS testing cascaded CSS Variables on div 't2b' 
>+PASS testing cascaded CSS Variables on div 't2c' 
>+PASS testing cascaded CSS Variables on div 't2d' 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c55080914063cd238f47fdb6589abd3cdc8869e4
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading.html
>@@ -0,0 +1,74 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>variable definition cascading tests</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/#using-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        * {
>+            --var0:x;
>+        }
>+    </style>
>+</head>
>+<body>
>+    
>+    <div id="t0"></div>
>+
>+    
>+    <div id="t1a" style="--var1:a">
>+        <div id="t1b" style="--var2:b">
>+            <div id="t1c" style="--var3:c"></div>
>+            <div id="t1d" style="--var4:d"></div>
>+        </div>
>+    </div>
>+
>+    
>+    <div id="t2a" style="--var0:a">
>+        <div id="t2b" style="--var0:b;--var1:c">
>+            <div id="t2c" style="--var0:d;--var1:e"></div>
>+            <div id="t2d" style="--var2:f"></div>
>+        </div>
>+    </div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        var tests = [
>+            {"divid": "t0",     "expectedValues":["x"]},
>+            {"divid": "t1a",    "expectedValues":["x","a"]},
>+            {"divid": "t1b",    "expectedValues":["x","a","b"]},
>+            {"divid": "t1c",    "expectedValues":["x","a","b","c"]},
>+            {"divid": "t1d",    "expectedValues":["x","a","b","","d"]},
>+            {"divid": "t2a",    "expectedValues":["a"]},
>+            {"divid": "t2b",    "expectedValues":["b","c"]},
>+            {"divid": "t2c",    "expectedValues":["d","e"]},
>+            {"divid": "t2d",    "expectedValues":["x","c","f"]}
>+        ];
>+
>+        let maxVariables = 5;
>+
>+        tests.forEach(function (testCase) {
>+            test( function () {
>+                let div = document.getElementById(testCase.divid);
>+                let computedStyle = window.getComputedStyle(div);
>+                for (var i = 0; i < maxVariables; ++i) {
>+                    let testVar = "--var" + i;
>+                    let actualValue = computedStyle.getPropertyValue(testVar);
>+                    let expectedValue = testCase.expectedValues[i];
>+                    if (expectedValue === undefined){
>+                        expectedValue = "";
>+                    }
>+                    assert_equals(actualValue, expectedValue, "Actual Value for '" + testVar + "' should match expected value");
>+
>+                }
>+            }, "testing cascaded CSS Variables on div '" + testCase.divid + "'");
>+        });
>+    </script>
>+</body>
>+</html>
>\ No newline at end of file
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..73fb128056d74717a2b5ef35d622a9d5c1f86bd6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-expected.txt
>@@ -0,0 +1,75 @@
>+
>+PASS no variable 
>+PASS variable 
>+PASS single char variable 
>+PASS single char '-' variable 
>+FAIL no char variable assert_equals: Expected Value should match actual value expected "value" but got ""
>+PASS white space value (single space) 
>+FAIL white space value (double space) assert_equals: Expected Value should match actual value expected "  " but got " "
>+PASS overwrite 
>+PASS can't overwrite with no value 
>+PASS can overwrite with space value 
>+PASS case sensetivity 
>+PASS case sensetivity2 
>+PASS parsing three dashes at start of variable 
>+PASS parsing multiple dashes with one dash at start of variable 
>+PASS  leading white space (single space) 
>+PASS  middle white space (single space) 
>+PASS  trailing white space (single space) 
>+FAIL  leading white space (double space) 2 assert_equals: Expected Value should match actual value expected "  value" but got " value"
>+FAIL  middle white space (double space) 2 assert_equals: Expected Value should match actual value expected "value1  value2" but got "value1 value2"
>+FAIL  trailing white space (double space) 2 assert_equals: Expected Value should match actual value expected "value  " but got "value "
>+PASS !important 
>+PASS !important 2 
>+PASS !important (with space) 
>+PASS no variable (Computed Style) 
>+PASS variable (Computed Style) 
>+PASS single char variable (Computed Style) 
>+PASS single char '-' variable (Computed Style) 
>+FAIL no char variable (Computed Style) assert_equals: Expected Value should match actual value expected "value" but got ""
>+PASS white space value (single space) (Computed Style) 
>+FAIL white space value (double space) (Computed Style) assert_equals: Expected Value should match actual value expected "  " but got " "
>+PASS overwrite (Computed Style) 
>+PASS can't overwrite with no value (Computed Style) 
>+PASS can overwrite with space value (Computed Style) 
>+PASS case sensetivity (Computed Style) 
>+PASS case sensetivity2 (Computed Style) 
>+PASS parsing three dashes at start of variable (Computed Style) 
>+PASS parsing multiple dashes with one dash at start of variable (Computed Style) 
>+PASS  leading white space (single space) (Computed Style) 
>+PASS  middle white space (single space) (Computed Style) 
>+PASS  trailing white space (single space) (Computed Style) 
>+FAIL  leading white space (double space) 2 (Computed Style) assert_equals: Expected Value should match actual value expected "  value" but got " value"
>+FAIL  middle white space (double space) 2 (Computed Style) assert_equals: Expected Value should match actual value expected "value1  value2" but got "value1 value2"
>+FAIL  trailing white space (double space) 2 (Computed Style) assert_equals: Expected Value should match actual value expected "value  " but got "value "
>+PASS !important (Computed Style) 
>+PASS !important 2 (Computed Style) 
>+PASS !important (with space) (Computed Style) 
>+PASS no variable (Cascading) 
>+PASS variable (Cascading) 
>+PASS single char variable (Cascading) 
>+PASS single char '-' variable (Cascading) 
>+FAIL no char variable (Cascading) assert_equals: Expected Value should match actual value expected "value" but got ""
>+PASS white space value (single space) (Cascading) 
>+FAIL white space value (double space) (Cascading) assert_equals: Expected Value should match actual value expected "  " but got " "
>+PASS overwrite (Cascading) 
>+PASS can't overwrite with no value (Cascading) 
>+PASS can overwrite with space value (Cascading) 
>+PASS case sensetivity (Cascading) 
>+PASS case sensetivity2 (Cascading) 
>+PASS parsing three dashes at start of variable (Cascading) 
>+PASS parsing multiple dashes with one dash at start of variable (Cascading) 
>+PASS  leading white space (single space) (Cascading) 
>+PASS  middle white space (single space) (Cascading) 
>+PASS  trailing white space (single space) (Cascading) 
>+FAIL  leading white space (double space) 2 (Cascading) assert_equals: Expected Value should match actual value expected "  value" but got " value"
>+FAIL  middle white space (double space) 2 (Cascading) assert_equals: Expected Value should match actual value expected "value1  value2" but got "value1 value2"
>+FAIL  trailing white space (double space) 2 (Cascading) assert_equals: Expected Value should match actual value expected "value  " but got "value "
>+PASS !important (Cascading) 
>+PASS !important 2 (Cascading) 
>+PASS !important (with space) (Cascading) 
>+PASS basic CSSOM.setProperty 
>+FAIL CSSOM.setProperty with space 1 assert_equals: Expected Value should match actual value expected "" but got "green"
>+FAIL CSSOM.setProperty with space 2 assert_equals: Expected Value should match actual value expected "" but got "green"
>+PASS CSSOM.setProperty with space 3 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..9acb2cf80115bf2c904065fa462a9479e5bd2dd8
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords-expected.txt
>@@ -0,0 +1,8 @@
>+
>+PASS computed style inherit 
>+PASS computed style initial 
>+PASS computed style unset 
>+PASS specified style inherit 
>+PASS specified style initial 
>+PASS specified style unset 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6cba261b09fce0247964b8b809f8ecd32c49dae0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords.html
>@@ -0,0 +1,68 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variable definitions and keywords</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/#using-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        /* Specify a value in a rule hitting keyword targets so that the keywords
>+           have something to override in the cascade. */
>+        div > div
>+        {
>+            --var: 10px;
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="inheritParent" style="--var: 20px;">
>+        <div id="inheritTest" style="--var: inherit;"></div>
>+    </div>
>+
>+    <div id="initialParent" style="--var: 20px;">
>+        <div id="initialTest" style="--var: initial;"></div>
>+    </div>
>+
>+    <div id="unsetParent" style="--var: 20px;">
>+        <div id="unsetTest" style="--var: unset;"></div>
>+    </div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        let computedStyle = [
>+            { elementId: "inheritTest", property: "--var", expectedValue: "20px", testName: "computed style inherit" },
>+            { elementId: "initialTest", property: "--var", expectedValue: "", testName: "computed style initial" },
>+            { elementId: "unsetTest", property: "--var", expectedValue: "20px", testName: "computed style unset" }
>+        ];
>+
>+        let specifiedStyle = [
>+            { elementId: "inheritTest", property: "--var", expectedValue: "inherit", testName: "specified style inherit" },
>+            { elementId: "initialTest", property: "--var", expectedValue: "initial", testName: "specified style initial" },
>+            { elementId: "unsetTest", property: "--var", expectedValue: "unset", testName: "specified style unset" }
>+        ];
>+
>+        computedStyle.forEach(function (csTest) {
>+            test( function () {
>+                var elem = document.getElementById(csTest.elementId);
>+                var actualValue = window.getComputedStyle(elem).getPropertyValue(csTest.property).trim();
>+                assert_equals(csTest.expectedValue, actualValue);
>+            }, csTest.testName);
>+        });
>+
>+        specifiedStyle.forEach(function (ssTest) {
>+            test( function () {
>+                var elem = document.getElementById(ssTest.elementId);
>+                var actualValue = elem.style.getPropertyValue(ssTest.property);
>+                assert_equals(ssTest.expectedValue, actualValue);
>+            }, ssTest.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..037aa314dab4644acd684e845488bb77e88ba69a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition.html
>@@ -0,0 +1,104 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>variable-definition: get variable value using getPropertyValue</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/#using-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <div id="log"></div>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    let templates = [
>+        { varName:"--var",     expectedValue:"",        style:"",                           testName:"no variable"},
>+        { varName:"--var",     expectedValue:"value",   style:"--var:value",                testName:"variable"},
>+        { varName:"--v",       expectedValue:"value",   style:"--v:value",                  testName:"single char variable"},
>+        { varName:"---",       expectedValue:"value",   style:"---:value",                  testName:"single char '-' variable"},
>+        { varName:"--",        expectedValue:"value",   style:"--:value",                   testName:"no char variable"},
>+        { varName:"--var",     expectedValue:" ",       style:"--var: ",                    testName:"white space value (single space)"},
>+        { varName:"--var",     expectedValue:"  ",      style:"--var:  ",                   testName:"white space value (double space)"},
>+        { varName:"--var",     expectedValue:"value2",  style:"--var:value1; --var:value2", testName:"overwrite"},
>+        { varName:"--var",     expectedValue:"value",   style:"--var:value;--var:;",        testName:"can't overwrite with no value"},
>+        { varName:"--var",     expectedValue:" ",       style:"--var:value;--var: ;",       testName:"can overwrite with space value"},
>+        { varName:"--var",     expectedValue:"value1",  style:"--var:value1; --Var:value2", testName:"case sensetivity"},
>+        { varName:"--Var",     expectedValue:"value2",  style:"--var:value1; --Var:value2", testName:"case sensetivity2"},
>+        { varName:"---var",    expectedValue:"value",  style:"---var:value;",               testName:"parsing three dashes at start of variable"},
>+        { varName:"-var4" ,    expectedValue:"",        style:"-var4:value3",               testName:"parsing multiple dashes with one dash at start of variable"},
>+        { varName:"--var",     expectedValue:" value",  style:"--var: value",               testName:" leading white space (single space)"},
>+        { varName:"--var",     expectedValue:"value1 value2", style:"--var:value1 value2",  testName:" middle white space (single space)"},
>+        { varName:"--var",     expectedValue:"value ",  style:"--var:value ",               testName:" trailing white space (single space)"},
>+        { varName:"--var",     expectedValue:"  value", style:"--var:  value",              testName:" leading white space (double space) 2"},
>+        { varName:"--var",     expectedValue:"value1  value2", style:"--var:value1  value2",testName:" middle white space (double space) 2"},
>+        { varName:"--var",     expectedValue:"value  ", style:"--var:value  ",              testName:" trailing white space (double space) 2"},
>+        { varName:"--var",     expectedValue:"value1 ",  style:"--var:value1 !important;", testName:"!important"},
>+        { varName:"--var",     expectedValue:"value1",  style:"--var:value1!important;--var:value2;", testName:"!important 2"},
>+        { varName:"--var",     expectedValue:"value1 ", style:"--var:value1 !important;--var:value2;", testName:"!important (with space)"}
>+    ];
>+
>+    templates.forEach(function (template) {
>+        test( function () {
>+            let div = document.createElement("div");
>+            div.style.cssText = template.style;
>+            document.body.appendChild(div);
>+            let value = div.style.getPropertyValue(template.varName);
>+            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+            document.body.removeChild(div);
>+        }, template.testName);
>+    });
>+
>+    templates.forEach(function (template) {
>+        test( function () {
>+            let div = document.createElement("div");
>+            div.style.cssText = template.style;
>+            document.body.appendChild(div);
>+            let computedStyle = window.getComputedStyle(div);
>+            let value = computedStyle.getPropertyValue(template.varName);
>+            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+            document.body.removeChild(div);
>+        }, template.testName +" (Computed Style)");
>+    });
>+
>+    templates.forEach(function (template) {
>+        test( function () {
>+            let div = document.createElement("div");
>+            div.style.cssText = template.style;
>+            document.body.appendChild(div);
>+            let divChild = document.createElement("div");
>+            div.appendChild(divChild);
>+            let computedStyle = window.getComputedStyle(divChild);
>+            let value = computedStyle.getPropertyValue(template.varName);
>+            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+            document.body.removeChild(div);
>+        }, template.testName +" (Cascading)");
>+    });
>+
>+    let template2 = [
>+        { varToSet:"--varUnique",       setValue:"green", varNameForRetrieval:"--varUnique",        expectedValue:"green",  testName:"basic CSSOM.setProperty"},
>+        { varToSet:"--varUnique2 ",     setValue:"green", varNameForRetrieval:"--varUnique2 ",      expectedValue:"",       testName:"CSSOM.setProperty with space 1"},
>+        { varToSet:"--varUnique3 name", setValue:"green", varNameForRetrieval:"--varUnique3 name",  expectedValue:"",       testName:"CSSOM.setProperty with space 2"},
>+        { varToSet:"--varUnique4 name", setValue:"green", varNameForRetrieval:"--varUnique4",       expectedValue:"",       testName:"CSSOM.setProperty with space 3"},
>+    ];
>+
>+    template2.forEach(function (template) {
>+        test( function () {
>+            let div = document.createElement("div");
>+            div.style.setProperty(template.varToSet, template.setValue);
>+            document.body.appendChild(div);
>+            let computedStyle = window.getComputedStyle(div);
>+            let value = computedStyle.getPropertyValue(template.varNameForRetrieval);
>+            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+            document.body.removeChild(div);
>+        }, template.testName);
>+    });
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..2354135a05f5e020cfda23cdf3c1a4ec1ccb2660
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup-expected.txt
>@@ -0,0 +1,4 @@
>+PASS if doesn't crash
>+
>+PASS CSS Variables Test: Exponential blowup doesn't crash 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..513a6f1628f17d31211b75ce4351b7dc95523a87
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup.html
>@@ -0,0 +1,28 @@
>+<!doctype html>
>+<title>CSS Variables Test: Exponential blowup doesn't crash</title>
>+<meta charset="UTF-8">
>+<script src="/resources/testharness.js"></script>
>+<script src="/resources/testharnessreport.js"></script>
>+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Ãlvarez">
>+<link rel="author" href="https://mozilla.org" title="Mozilla">
>+<link rel="help" href="https://drafts.csswg.org/css-variables/">
>+<script>
>+  let css = `
>+    --v0: "Something really really really long";
>+  `;
>+  for (let i = 0; i < 30; ++i)
>+    css += `--v${i + 1}: var(--v${i}), var(--v${i});`;
>+  let s = document.createElement("style");
>+  s.innerHTML = `
>+    :root { ${css}; }
>+    :root::before { content: var(--v31); }
>+  `;
>+  document.head.appendChild(s);
>+</script>
>+PASS if doesn't crash
>+<script>
>+  test(function() {
>+    getComputedStyle(document.documentElement, "::before").content;
>+    assert_true(true, "Didn't crash");
>+  });
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..e75ddc112f7a9692a38338b71cb6bbf3ae35f798
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter-expected.txt
>@@ -0,0 +1,14 @@
>+CSS variable defining 'color' property should be applied to ::first-letter and its color should be blue.
>+CSS variable defining 'font-size' property should be applied to ::first-letter and its font-size should be 25px.
>+CSS variable defining 'font-weight' property should be applied to ::first-letter and its font-weight should be 900.
>+CSS variable defining 'position' property should not be applied to ::first-letter and its position should be static.
>+CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-letter and its color should be blue.
>+CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-letter and its position should be static.
>+
>+PASS color 
>+PASS font-size 
>+PASS font-weight 
>+FAIL position assert_equals: expected "absolute" but got "static"
>+PASS nested color 
>+FAIL abspos assert_equals: expected "absolute" but got "static"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..725da7a11ae0b0aaa8d49b9ff127791930d3784d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter.html
>@@ -0,0 +1,77 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables with ::first-letter pseudo-element.</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        #div1::first-letter {
>+            color: var(--my-color);
>+            --my-color: rgb(0, 0, 255);
>+        }
>+
>+        #div2::first-letter {
>+            font-size: var(--my-font-size);
>+            --my-font-size: 25px;
>+        }
>+
>+        #div3::first-letter {
>+            font-weight: var(--my-font-weight);
>+            --my-font-weight: 900;
>+        }
>+
>+        #div4::first-letter {
>+            position: var(--my-position);
>+            --my-position: absolute;
>+        }
>+
>+        #div5::first-letter {
>+            color: var(--my-color1);
>+            --my-color1: var(--my-color2);
>+            --my-color2: rgb(0, 0, 255);
>+        }
>+
>+        #div6::first-letter {
>+            position: var(--my-position1);
>+            --my-position1: var(--my-position2);
>+            --my-position2: absolute;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="div1">CSS variable defining 'color' property should be applied to ::first-letter and its color should be blue.</div>
>+    <div id="div2">CSS variable defining 'font-size' property should be applied to ::first-letter and its font-size should be 25px.</div>
>+    <div id="div3">CSS variable defining 'font-weight' property should be applied to ::first-letter and its font-weight should be 900.</div>
>+    <div id="div4">CSS variable defining 'position' property should not be applied to ::first-letter and its position should be static.</div>
>+    <div id="div5">CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-letter and its color should be blue.</div>
>+    <div id="div6">CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-letter and its position should be static.</div>
>+
>+    <script>
>+        "use strict";
>+        var testcases = [
>+            { elementId: "div1", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "color" },
>+            { elementId: "div2", property: "font-size", expectedValue: "25px", testName: "font-size" },
>+            { elementId: "div3", property: "font-weight", expectedValue: "900", testName: "font-weight" },
>+            { elementId: "div4", property: "position", expectedValue: "static", testName: "position" },
>+            { elementId: "div5", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "nested color" },
>+            { elementId: "div6", property: "position", expectedValue: "static", testName: "abspos" },
>+        ];
>+
>+        testcases.forEach(function (tc) {
>+            test( function () {
>+                var elem = document.getElementById(tc.elementId);
>+                var actualValue = window.getComputedStyle(elem, ':first-letter').getPropertyValue(tc.property);
>+                assert_equals(tc.expectedValue, actualValue);
>+            }, tc.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..8450a2bea2de816ea0f3c7a47a7a3356cceae498
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line-expected.txt
>@@ -0,0 +1,19 @@
>+CSS variable defining 'color' property should be applied to ::first-line and its color should be blue.
>+
>+CSS variable defining 'font-size' property should be applied to ::first-line and its font-size should be 25px.
>+
>+CSS variable defining 'font-weight' property should be applied to ::first-line and its font-weight should be 900.
>+
>+CSS variable defining 'position' property should not be applied to ::first-line and its position should be static.
>+
>+CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-line and its color should be blue.
>+
>+CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-line and its position should be static.
>+
>+PASS color 
>+PASS font-size 
>+PASS font-weight 
>+FAIL position assert_equals: expected "absolute" but got "static"
>+PASS nested color 
>+FAIL abspos assert_equals: expected "absolute" but got "static"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9a4f3b02de9c0200497e5aa03a3ff271f02fe65d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line.html
>@@ -0,0 +1,87 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables with ::first-line pseudo-element.</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        div {
>+            width: 500px;
>+        }
>+
>+        #div1::first-line {
>+            color: var(--my-color);
>+            --my-color: rgb(0, 0, 255);
>+        }
>+
>+        #div2::first-line {
>+            font-size: var(--my-font-size);
>+            --my-font-size: 25px;
>+        }
>+
>+        #div3::first-line {
>+            font-weight: var(--my-font-weight);
>+            --my-font-weight: 900;
>+        }
>+
>+        #div4::first-line {
>+            position: var(--my-position);
>+            --my-position: absolute;
>+        }
>+
>+        #div5::first-line {
>+            color: var(--my-color1);
>+            --my-color1: var(--my-color2);
>+            --my-color2: rgb(0, 0, 255);
>+        }
>+
>+        #div6::first-line {
>+            position: var(--my-position1);
>+            --my-position1: var(--my-position2);
>+            --my-position2: absolute;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="div1">CSS variable defining 'color' property should be applied to ::first-line and its color should be blue.</div>
>+    <br />
>+    <div id="div2">CSS variable defining 'font-size' property should be applied to ::first-line and its font-size should be 25px.</div>
>+    <br />
>+    <div id="div3">CSS variable defining 'font-weight' property should be applied to ::first-line and its font-weight should be 900.</div>
>+    <br />
>+    <div id="div4">CSS variable defining 'position' property should not be applied to ::first-line and its position should be static.</div>
>+    <br />
>+    <div id="div5">CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-line and its color should be blue.</div>
>+    <br />
>+    <div id="div6">CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-line and its position should be static.</div>
>+
>+    <script>
>+        "use strict";
>+
>+        let templates = [
>+            { elementId: "div1", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "color" },
>+            { elementId: "div2", property: "font-size", expectedValue: "25px", testName: "font-size" },
>+            { elementId: "div3", property: "font-weight", expectedValue: "900", testName: "font-weight" },
>+            { elementId: "div4", property: "position", expectedValue: "static", testName: "position" },
>+            { elementId: "div5", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "nested color" },
>+            { elementId: "div6", property: "position", expectedValue: "static", testName: "abspos" },
>+        ];
>+
>+        templates.forEach(function (template) {
>+            test( function () {
>+                var elem = document.getElementById(template.elementId);
>+                var actualValue = window.getComputedStyle(elem, ':first-line').getPropertyValue(template.property);
>+                assert_equals(template.expectedValue, actualValue);
>+            }, template.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..893611a157076350fa5389a0d3a8d2f5d0fef4d3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001-expected.html
>@@ -0,0 +1,4 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>CSS Test Reference</title>
>+<div>PASS</div>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..792c51d31c3e90c3181e540d5101a4b8639fd3e7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001.html
>@@ -0,0 +1,19 @@
>+<!DOCTYPE html>
>+<meta charset="utf-8">
>+<title>CSS Test: Dynamic attribute change handling in generated content</title>
>+<link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:emilio@crisal.io">
>+<link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables">
>+<link rel="match" href="variable-generated-content-dynamic-001-ref.html">
>+<style>
>+:root {
>+  --my-attr: attr(data-foo);
>+}
>+div::before {
>+  content: var(--my-attr);
>+}
>+</style>
>+<div data-foo="FAIL"></div>
>+<script>
>+document.body.offsetTop;
>+document.querySelector('div').setAttribute('data-foo', "PASS");
>+</script>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..ef5f3fd163cc95599a1344ed3f13a2854eed8ae3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation-expected.txt
>@@ -0,0 +1,6 @@
>+
>+PASS css rule test 
>+PASS css rule test important 
>+PASS inline style test 
>+PASS inline style test important 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5a3c66b467e6585d74852390883cc00eb15ad234
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation.html
>@@ -0,0 +1,106 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Tests css variable invalidation</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        #test1 {
>+            --var1:red;
>+        }
>+        #test2 {
>+            --var2:red!important;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="test1"><div><div><div class="testElem"></div></div></div></div>
>+    <div id="test2"><div><div><div class="testElem"></div></div></div></div>
>+    <div id="test3" style="--var3:red"><div><div><div class="testElem"></div></div></div></div>
>+    <div id="test4" style="--var4:red!important"><div><div><div class="testElem"></div></div></div></div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        // This is a helper function to avoid repitition
>+        function testExpectations(testProperty, cssStyle, testElement, testDescription, expectedValue, expectedCssText, expectedPriority, expectedLength, expectedItem0) {
>+            assert_equals(cssStyle.cssText, expectedCssText, "cssText " + testDescription + ".");
>+            assert_equals(cssStyle.getPropertyValue(testProperty), expectedValue, "Value " + testDescription + ".");
>+            assert_equals(cssStyle.getPropertyPriority(testProperty), expectedPriority, "Priority " + testDescription + ".");
>+            assert_equals(cssStyle.length, expectedLength, "style length " + testDescription + ".");
>+            assert_equals(cssStyle.item(0), expectedItem0, "item(0) " + testDescription + ".");
>+
>+            var computedStyle = window.getComputedStyle(testElement);
>+            assert_equals(computedStyle.getPropertyValue(testProperty), expectedValue, "Computed Style value " + testDescription + ".");
>+        }
>+
>+        // This is a boilerplate to build a testcase and then test the expected outcome
>+        function testCase(cssStyle, testProperty, testElement, testImportant) {
>+            var initialCssText = testProperty + (testImportant ? ": red !important;" : ": red;");
>+
>+            testExpectations(testProperty, cssStyle, testElement, "initial", "red", initialCssText, testImportant ? "important" : "", 1, testProperty);
>+
>+            cssStyle.setProperty(testProperty, "blue");
>+
>+            if (!testImportant) {
>+                testExpectations(testProperty, cssStyle, testElement, "after setProperty", "blue", testProperty + ": blue;", "", 1, testProperty);
>+            }
>+
>+            if (testProperty) {
>+                cssStyle.setProperty(testProperty, "pink", 'important');
>+                testExpectations(testProperty, cssStyle, testElement, "after setProperty important", "pink", testProperty + ": pink !important;", "important", 1, testProperty);
>+            }
>+
>+            cssStyle.removeProperty(testProperty);
>+            testExpectations(testProperty, cssStyle, testElement, "after removeProperty", "", "", "", 0, "");
>+
>+            var cssText = testProperty + (testImportant ? ":green!important;" : ":green;");
>+            var expectedCssText = testProperty + (testImportant ? ": green !important;" : ": green;");
>+            cssStyle.cssText = cssText;
>+            testExpectations(testProperty, cssStyle, testElement, "after setting cssText", "green", expectedCssText, testImportant ? "important" : "", 1, testProperty);
>+        }
>+
>+        // The actual tests that utilize the boilerplate & helper methods above
>+        test( function () {
>+            var cssStyle = document.styleSheets[0].cssRules[0].style;
>+            var testProperty = "--var1";
>+            var testElement = document.querySelectorAll("#test1 .testElem")[0];
>+
>+            testCase(cssStyle, testProperty, testElement, false);
>+        }, "css rule test");
>+
>+        test( function () {
>+            var cssStyle = document.styleSheets[0].cssRules[1].style;
>+            var testProperty = "--var2";
>+            var testElement = document.querySelectorAll("#test2 .testElem")[0];
>+
>+            testCase(cssStyle, testProperty, testElement, true);
>+        }, "css rule test important");
>+
>+        test( function () {
>+            var element = document.getElementById("test3");
>+            var cssStyle = element.style;
>+            var testProperty = "--var3";
>+            var testElement = document.querySelectorAll("#test3 .testElem")[0];
>+
>+            testCase(cssStyle, testProperty, testElement, false);
>+        }, "inline style test");
>+
>+        test( function () {
>+            var element = document.getElementById("test4");
>+            var cssStyle = element.style;
>+            var testProperty = "--var4";
>+            var testElement = document.querySelectorAll("#test4 .testElem")[0];
>+
>+            testCase(cssStyle, testProperty, testElement, true);
>+        }, "inline style test important");
>+    </script>
>+</body>
>+</html>
>\ No newline at end of file
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..eea8c71d09d42cbcb7010a1afc96a0de3312be05
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute-expected.txt
>@@ -0,0 +1,50 @@
>+
>+PASS Testing 'stroke-width' on '#box1'. 
>+PASS Testing 'stroke-width' on '#box2'. 
>+PASS Testing 'stroke-width' on '#box3'. 
>+PASS Testing 'clip' on '#test4'. 
>+FAIL Testing 'alignment-baseline'. assert_equals: Value Test. expected "baseline" but got "auto"
>+FAIL Testing 'baseline-shift'. assert_equals: Value Test. expected "sub" but got "baseline"
>+PASS Testing 'clip-rule'. 
>+PASS Testing 'color'. 
>+FAIL Testing 'color-interpolation-filters'. assert_equals: Default value. expected "" but got "linearRGB"
>+PASS Testing 'cursor'. 
>+PASS Testing 'direction'. 
>+FAIL Testing 'display'. assert_equals: Value Test. expected "block" but got "inline"
>+FAIL Testing 'dominant-baseline'. assert_equals: Value Test. expected "use-script" but got "auto"
>+FAIL Testing 'fill'. assert_equals: Default value. expected "black" but got "rgb(0, 0, 0)"
>+FAIL Testing 'fill-opacity'. assert_equals: Value Test. expected "0.8" but got "0.800000011920929"
>+PASS Testing 'fill-rule'. 
>+PASS Testing 'filter'. 
>+FAIL Testing 'flood-color'. assert_equals: Default value. expected "" but got "rgb(0, 0, 0)"
>+FAIL Testing 'flood-opacity'. assert_equals: Value Test. expected "0.7" but got "0.699999988079071"
>+FAIL Testing 'font-family'. assert_equals: Default value. expected "Times New Roman" but got "-webkit-standard"
>+PASS Testing 'font-size'. 
>+FAIL Testing 'font-size-adjust'. assert_equals: Default value. expected "none" but got ""
>+PASS Testing 'font-stretch'. 
>+PASS Testing 'font-style'. 
>+FAIL Testing 'font-weight'. assert_equals: Default value. expected "400" but got "normal"
>+FAIL Testing 'glyph-orientation-horizontal'. assert_equals: Value Test. expected "13deg" but got "0deg"
>+FAIL Testing 'glyph-orientation-vertical'. assert_equals: Value Test. expected "19deg" but got "0deg"
>+FAIL Testing 'kerning'. assert_equals: Default value. expected "auto" but got "0"
>+PASS Testing 'letter-spacing'. 
>+FAIL Testing 'lighting-color'. assert_equals: Default value. expected "" but got "rgb(255, 255, 255)"
>+FAIL Testing 'opacity'. assert_equals: Value Test. expected "0.11" but got "0.10999999940395355"
>+FAIL Testing 'overflow'. assert_equals: Value Test. expected "hidden" but got "visible"
>+FAIL Testing 'pointer-events'. assert_equals: Default value. expected "visiblePainted" but got "auto"
>+FAIL Testing 'stop-color'. assert_equals: Default value. expected "" but got "rgb(0, 0, 0)"
>+FAIL Testing 'stop-opacity'. assert_equals: Value Test. expected "0.225" but got "0.22499999403953552"
>+FAIL Testing 'stroke'. assert_equals: Default value. expected "" but got "none"
>+PASS Testing 'stroke-dasharray'. 
>+PASS Testing 'stroke-dashoffset'. 
>+PASS Testing 'stroke-linecap'. 
>+PASS Testing 'stroke-linejoin'. 
>+PASS Testing 'stroke-miterlimit'. 
>+FAIL Testing 'stroke-opacity'. assert_equals: Value Test. expected "0.221" but got "0.22100000083446503"
>+PASS Testing 'stroke-width'. 
>+PASS Testing 'text-anchor'. 
>+FAIL Testing 'text-decoration'. assert_equals: Value Test. expected "underline" but got "none"
>+PASS Testing 'visibility'. 
>+PASS Testing 'word-spacing'. 
>+FAIL Testing 'writing-mode'. assert_equals: Default value. expected "lr-tb" but got "horizontal-tb"
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5a3cb97c3a40d7a3250380d6af5fae4f89125439
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html
>@@ -0,0 +1,125 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables and SVG presentation attributes</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        body {
>+            --stroke3: 5px
>+        }
>+    </style>
>+</head>
>+<body style="--prop: ;">
>+    <svg id="svg" width="300px" height="100px">
>+        <defs>
>+            <linearGradient id="gradient">
>+                <stop offset="0" stop-color="#ff8800"></stop>
>+                <stop offset="1" stop-color="#ffff00"></stop>
>+            </lineargradient>
>+        </defs>
>+        <rect id="box1" x="15" y="15" width="50" height="50" fill="lightgreen" stroke-width="var(--stroke1)" stroke="green" style="--stroke1: 10px"></rect>
>+        <rect id="box2" x="115" y="15" width="50" height="50" fill="lightgreen" stroke-width="var(--stroke2)" stroke="green" style="--stroke2: 20px"></rect>
>+        <rect id="box3" x="215" y="15" width="50" height="50" fill="lightgreen" stroke-width="var(--stroke3)" stroke="green"></rect>
>+        <symbol id="test4" clip="var(--clip)" style="--clip: rect(1px 10em 3rem 2ch)"></symbol>
>+    </svg>
>+
>+    <script>
>+        "use strict";
>+
>+        var testcases = [
>+            { element: "box1",      property:"stroke-width",    expectedPropertyValue: "10px" },
>+            { element: "box2",      property:"stroke-width",    expectedPropertyValue: "20px" },
>+            { element: "box3",      property:"stroke-width",    expectedPropertyValue: "5px" },
>+            { element: "test4",     property:"clip",            expectedPropertyValue: "rect(1px, 160px, 48px, 16px)" },
>+        ];
>+
>+        testcases.forEach(function (testcase) {
>+            test( function () {
>+                var element = document.getElementById(testcase.element);
>+                var computedStyle = window.getComputedStyle(element);
>+                var computedPropertyValue = computedStyle.getPropertyValue(testcase.property);
>+                assert_equals(computedPropertyValue, testcase.expectedPropertyValue);
>+            }, "Testing '" + testcase.property + "' on '#" + testcase.element + "'.");
>+        });
>+
>+        let testproperties = [
>+            { property: "alignment-baseline", valuesToTest:["auto", "baseline", "before-edge", "text-before-edge", "middle", "central", "after-edge", "text-after-edge", "ideographic", "alphabetic", "hanging", "mathematical"], default: "auto" },
>+            { property: "baseline-shift", valuesToTest:["baseline", "sub", "super", "13%", "28px"], default: "baseline" },
>+            { property: "clip-rule", valuesToTest:["nonzero", "evenodd"], default: "nonzero" },
>+            { property: "color", valuesToTest:["rgb(128, 0, 128)"], default: "rgb(0, 0, 0)" },
>+            { property: "color-interpolation-filters", valuesToTest:["auto", "sRGB", "linearRGB"], default: "" },
>+            { property: "cursor", valuesToTest:["auto", "crosshair", "default", "pointer", "move", "e-resize", "ne-resize", "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "text", "wait", "help"], default: "auto" },
>+            { property: "direction", valuesToTest:["ltr", "rtl"], default: "ltr" },
>+            { property: "display", valuesToTest:["inline", "block", "list-item", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group", "table-column", "table-cell", "table-caption", "none"], default: "inline" },
>+            { property: "dominant-baseline", valuesToTest:["auto", "use-script", "no-change", "reset-size", "ideographic", "alphabetic", "hanging", "mathematical", "central", "middle", "text-after-edge", "text-before-edge"], default: "auto" },
>+            { property: "fill", valuesToTest:["red", "url(#gradient) black"], default: "black" },
>+            { property: "fill-opacity", valuesToTest:["0.8"], default: "1" },
>+            { property: "fill-rule", valuesToTest:["nonzero", "evenodd"], default: "nonzero" },
>+            { property: "filter", valuesToTest:["none"], default: "none" },
>+            { property: "flood-color", valuesToTest:["currentColor", "green"], default: "" },
>+            { property: "flood-opacity", valuesToTest:["0.7"], default: "1" },
>+            { property: "font-family", valuesToTest:["Arial", "Times New Roman"], default: "Times New Roman" },
>+            { property: "font-size", valuesToTest:["31px"], default: "16px" },
>+            { property: "font-size-adjust", valuesToTest:["22", "none"], default: "none" },
>+            { property: "font-stretch", valuesToTest:["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"], default: "normal" },
>+            { property: "font-style", valuesToTest:["normal", "italic"], default: "normal" },
>+            { property: "font-weight", valuesToTest:["100", "200", "300", "400", "500", "600", "700", "800", "900"], default: "400" },
>+            { property: "glyph-orientation-horizontal", valuesToTest:["13deg"], default: "0deg" },
>+            { property: "glyph-orientation-vertical", valuesToTest:["auto", "19deg"], default: "auto" },
>+            { property: "kerning", valuesToTest:["auto", "15"], default: "auto" },
>+            { property: "letter-spacing", valuesToTest:["normal", "21px"], default: "normal" },
>+            { property: "lighting-color", valuesToTest:["currentColor", "pink"], default: "" },
>+            { property: "opacity", valuesToTest:["0.11"], default: "1" },
>+            { property: "overflow", valuesToTest:["visible", "hidden", "scroll", "auto"], default: "visible" },
>+            { property: "pointer-events", valuesToTest:["visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all", "none"], default: "visiblePainted" },
>+            { property: "stop-color", valuesToTest:["currentColor", "maroon"], default: "" },
>+            { property: "stop-opacity", valuesToTest:["0.225"], default: "1" },
>+            { property: "stroke", valuesToTest:["green", "url(#gradient)"], default: "" },
>+            { property: "stroke-dasharray", valuesToTest:["none", "2px"], default: "none" },
>+            { property: "stroke-dashoffset", valuesToTest:["14%", "98px"], default: "0px" },
>+            { property: "stroke-linecap", valuesToTest:["butt", "round", "square"], default: "butt" },
>+            { property: "stroke-linejoin", valuesToTest:["miter", "round", "bevel"], default: "miter" },
>+            { property: "stroke-miterlimit", valuesToTest:["2"], default: "4" },
>+            { property: "stroke-opacity", valuesToTest:["0.221"], default: "1" },
>+            { property: "stroke-width", valuesToTest:["88%", "31px"], default: "1px" },
>+            { property: "text-anchor", valuesToTest:["start", "middle", "end"], default: "start" },
>+            { property: "text-decoration", valuesToTest:["none", "underline", "overline", "line-through"], default: "none" },
>+            { property: "visibility", valuesToTest:["visible", "hidden", "collapse"], default: "visible" },
>+            { property: "word-spacing", valuesToTest:["31px"], default: "0px" },
>+            { property: "writing-mode", valuesToTest:["lr-tb", "rl-tb"], default: "lr-tb" },
>+        ];
>+
>+        testproperties.forEach(function (testcase) {
>+            test( function () {
>+                let svg = document.getElementById("svg");
>+                let rect = document.createElement("rect");
>+                svg.appendChild(rect);
>+                let computedStyle = window.getComputedStyle(rect);
>+                let expectedDefaultValue = testcase.default ? testcase.default : "";
>+                let actualValue = computedStyle.getPropertyValue(testcase.property);
>+                assert_equals(actualValue, expectedDefaultValue, "Default value.");
>+                rect.style.cssText = testcase.property + ":var(--prop);";
>+
>+                for (var value of testcase.valuesToTest)
>+                {
>+                    document.body.style.setProperty("--prop", value);
>+                    computedStyle = window.getComputedStyle(rect);
>+                    let actualValue = computedStyle.getPropertyValue(testcase.property);
>+                    assert_equals(actualValue, value, "Value Test.");
>+                }
>+
>+                svg.removeChild(rect);
>+            }, "Testing '" + testcase.property + "'.");
>+        });
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..901208e753cf4d6ea0e2b8363b6cc859c7281f50
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element-expected.txt
>@@ -0,0 +1,10 @@
>+div1
>+div2
>+div3
>+div4
>+
>+PASS div1 
>+PASS div2 
>+PASS div3 
>+PASS div4 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..1c367a5534c3f469f3d4867105a585c1e06d041c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/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" />
>+    
>+    <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>
>+
>+    
>+    <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>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..4358b7c42a4f3d0817d9d35d9be469c1c8411b56
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom-expected.txt
>@@ -0,0 +1,4 @@
>+
>+PASS Verify correct results using CSSOM 
>+PASS Verify correct results with CSSOM overriding markup-set values 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..012ab43f32aadef2c53afd17b0722c440c1a8929
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom.html
>@@ -0,0 +1,54 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS variable references - via CSSOM</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+
>+<div id="target1"></div>
>+<div id="target2" style="background-color: red;"></div>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    // This test verifies that variable references are usable when set via CSSOM calls.
>+
>+    function TestCssom() {
>+        var target = document.getElementById("target1");
>+
>+        target.style.setProperty("background-color", "var(--prop)");
>+        assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty");
>+        assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty");
>+
>+        target.style.removeProperty("background-color");
>+        assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty");
>+        assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty");
>+    }
>+
>+    function TestCssomOverridingMarkup() {
>+        var target = document.getElementById("target1");
>+
>+        target.style.setProperty("background-color", "var(--prop)");
>+        assert_equals(target.style.backgroundColor, "var(--prop)", "background-color property value after calling setProperty");
>+        assert_equals(target.style.getPropertyValue("background-color"), "var(--prop)", "getPropertyValue('background-color') after calling setProperty");
>+
>+        target.style.removeProperty("background-color");
>+        assert_equals(target.style.backgroundColor, "", "background-color property value after calling removeProperty");
>+        assert_equals(target.style.getPropertyValue("background-color"), "", "getPropertyValue('background-color') after calling removeProperty");
>+    }
>+
>+    test(TestCssom, "Verify correct results using CSSOM");
>+    test(TestCssomOverridingMarkup, "Verify correct results with CSSOM overriding markup-set values");
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..64469551ee1de91b9683aee3fd093e04960c7144
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-expected.txt
>@@ -0,0 +1,20 @@
>+
>+PASS width: var(--prop); 
>+PASS width: var(--prop) !important; 
>+PASS width: var(--prop, ); 
>+PASS width: var(--prop, 20px); 
>+PASS width: var(--prop, blue); 
>+PASS width: var(--prop1, var(--prop2)); 
>+PASS width: var(--prop1, var(--prop2, var(--prop3, auto))); 
>+PASS width: var(--prop1) var(--prop2) 
>+PASS width: var(); 
>+PASS width: var(prop); 
>+PASS width: var(-prop); 
>+PASS width: var(--prop,); 
>+PASS width: var(--prop 20px); 
>+PASS width: var(--prop, var(prop)); 
>+PASS width: var(--prop, var(-prop)); 
>+PASS width: var(20px); 
>+PASS width: var(var(--prop)); 
>+PASS Variable reference left open at end of stylesheet 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d8e0a1e643d86ee1614dba4c8e3fb2ae51642766
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh-expected.txt
>@@ -0,0 +1,6 @@
>+
>+
>+Harness Error (TIMEOUT), message = null
>+
>+FAIL Verify substituted color value before refresh Argument 1 ('element') to Window.getComputedStyle must be an instance of Element
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9fc8e59c35cdf8727b4c11a01e87e1bf2fac490d
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh.html
>@@ -0,0 +1,56 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Variable reference across document refresh</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+
>+    <iframe id="iframe" src="resources/variable-reference-refresh-iframe.html"></iframe>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    setup({explicit_done: true});
>+
>+    // Set up event handler to drive tests
>+    var loadCount = 0;
>+    document.getElementById("iframe").addEventListener("load", function() {
>+        loadCount++;
>+        if (loadCount == 1)
>+        {
>+            test(function() {
>+                var iframe = document.getElementById("iframe");
>+                var iframeWindow = iframe.contentWindow;
>+                var iframeDocument = iframe.contentDocument;
>+                var testElement = iframeDocument.getElementById("testElement");
>+                var computedValue = iframeWindow.getComputedStyle(testElement).getPropertyValue("color").trim();
>+                assert_equals(computedValue, "rgb(0, 128, 0)", "color is green before page refresh");
>+                iframe.src = iframe.src;
>+            }, "Verify substituted color value before refresh");
>+        }
>+        else if (loadCount == 2)
>+        {
>+            test(function() {
>+                var iframeWindow = document.getElementById("iframe").contentWindow;
>+                var iframeDocument = document.getElementById("iframe").contentDocument;
>+                var testElement = iframeDocument.getElementById("testElement");
>+                var computedValue = iframeWindow.getComputedStyle(testElement).getPropertyValue("color").trim();
>+                assert_equals(computedValue, "rgb(0, 128, 0)", "color is green after page refresh");
>+            }, "Verify substituted color value after refresh");
>+
>+            done();
>+        }
>+    });
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..b11dedaa02c1bfb02d808507750fff4574529cea
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom-expected.txt
>@@ -0,0 +1,3 @@
>+
>+FAIL CSS variable references - shorthand properties - via CSSOM assert_equals: margin property value after calling setProperty expected "var(--prop)" but got ""
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a0185c4f2a61c421117823be41b9314022ccce9b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom.html
>@@ -0,0 +1,37 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS variable references - shorthand properties - via CSSOM</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/#serializing-custom-props">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+
>+<div id="target"></div>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    function runTest() {
>+        var target = document.getElementById("target");
>+
>+        target.style.setProperty("margin", "var(--prop)");
>+        assert_equals(target.style.margin, "var(--prop)", "margin property value after calling setProperty");
>+        assert_equals(target.style.getPropertyValue("margin"), "var(--prop)", "getPropertyValue('margin') after calling setProperty");
>+
>+        target.style.removeProperty("margin");
>+        assert_equals(target.style.margin, "", "margin property value after calling removeProperty");
>+        assert_equals(target.style.getPropertyValue("margin"), "", "getPropertyValue('margin') after calling removeProperty");
>+    }
>+
>+    test(runTest);
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..43a6cd588ec57834917e777f2d21fa1635906cd5
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-expected.txt
>@@ -0,0 +1,18 @@
>+
>+FAIL target1 margin assert_equals: expected "" but got "10px"
>+PASS target1 margin-left 
>+PASS target1 margin-top 
>+PASS target1 margin-right 
>+PASS target1 margin-bottom 
>+FAIL target2 margin assert_equals: expected "var(--prop)" but got ""
>+PASS target2 margin-left 
>+PASS target2 margin-top 
>+PASS target2 margin-right 
>+PASS target2 margin-bottom 
>+PASS target3 margin 
>+PASS target3 margin-left 
>+PASS target3 margin-top 
>+PASS target3 margin-right 
>+PASS target3 margin-bottom 
>+FAIL target4 background assert_equals: expected "var(--prop)" but got ""
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..8da0e798c95079a9f82b61b1be9698e9ba11ea18
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands.html
>@@ -0,0 +1,56 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Parse, store, and serialize CSS variable references - shorthand properties</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/#serializing-custom-props">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+
>+<div id="target1" style="margin: var(--prop); margin-top: 10px"></div>
>+<div id="target2" style="margin: var(--prop) !important; margin-top: 10px"></div>
>+<div id="target3" style="margin: var(--prop); margin-top: 10px !important"></div>
>+<div id="target4" style="background: var(--prop);"></div>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    var testcases = [
>+        { element: "target1",   propertyName: "margin",         expectedPropertyValue: "" },
>+        { element: "target1",   propertyName: "margin-left",    expectedPropertyValue: "" },
>+        { element: "target1",   propertyName: "margin-top",     expectedPropertyValue: "10px" },
>+        { element: "target1",   propertyName: "margin-right",   expectedPropertyValue: "" },
>+        { element: "target1",   propertyName: "margin-bottom",  expectedPropertyValue: "" },
>+
>+        { element: "target2",   propertyName: "margin",         expectedPropertyValue: "var(--prop)" },
>+        { element: "target2",   propertyName: "margin-left",    expectedPropertyValue: "" },
>+        { element: "target2",   propertyName: "margin-top",     expectedPropertyValue: "" },
>+        { element: "target2",   propertyName: "margin-right",   expectedPropertyValue: "" },
>+        { element: "target2",   propertyName: "margin-bottom",  expectedPropertyValue: "" },
>+
>+        { element: "target3",   propertyName: "margin",         expectedPropertyValue: "" },
>+        { element: "target3",   propertyName: "margin-left",    expectedPropertyValue: "" },
>+        { element: "target3",   propertyName: "margin-top",     expectedPropertyValue: "10px" },
>+        { element: "target3",   propertyName: "margin-right",   expectedPropertyValue: "" },
>+        { element: "target3",   propertyName: "margin-bottom",  expectedPropertyValue: "" },
>+
>+        { element: "target4",   propertyName: "background",     expectedPropertyValue: "var(--prop)" }
>+    ];
>+
>+    testcases.forEach(function (testcase) {
>+        test( function () {
>+            var div = document.getElementById(testcase.element);
>+            var actualPropertyValue = div.style.getPropertyValue(testcase.propertyName).trim();
>+            assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
>+        }, testcase.element + " " + testcase.propertyName);
>+    });
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..c604ca1fbab57fdc2998d40fb49320794fe3aac1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable-expected.txt
>@@ -0,0 +1,4 @@
>+
>+PASS Parse, store, and serialize CSS variable referencing another CSS variable 
>+PASS Parse, store, and serialize CSS variable referencing another CSS variable 1 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..866d6e649d3bd1186c9b157b8d32db7e6cc7470b
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable.html
>@@ -0,0 +1,36 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Parse, store, and serialize CSS variable referencing another CSS variable</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/#serializing-custom-props">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <div id="test1" style="--prop1: var(--prop2);"></div>
>+    <div id="test2" style="--prop1: var(--prop2, var(--prop3));"></div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        var testcases = [
>+            { elementId: "test1",   expectedPropertyValue: "var(--prop2)" },
>+            { elementId: "test2",   expectedPropertyValue: "var(--prop2, var(--prop3))" },
>+        ];
>+
>+        testcases.forEach(function (testcase) {
>+            test( function () {
>+                var testElement = document.getElementById(testcase.elementId);
>+                var actualPropertyValue = testElement.style.getPropertyValue("--prop1").trim();
>+                assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
>+            }, testcase.cssText);
>+        });
>+    </script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..3d9aaed6b129725cb5190afd9f19aefae834f37f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace-expected.html
>@@ -0,0 +1,14 @@
>+<!DOCTYPE html>
>+<title>Variable reference without whitespace - reference</title>
>+<link rel=author title="Simon Sapin" href=http://exyr.org/about/>
>+<p>The next four lines must be identical, containing only zeroes:
>+<p>0 0 0
>+<p>0 0 0
>+<p>0 0 0
>+<p>0 0 0
>+
>+<p>The next four lines must be identical, containing increasing integers:
>+<p>1 2 3
>+<p>1 2 3
>+<p>1 2 3
>+<p>1 2 3
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..35d558892e2af2e34a1df445fab02b791689bf56
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace.html
>@@ -0,0 +1,52 @@
>+<!DOCTYPE html>
>+<title>Variable reference without whitespace</title>
>+<link rel=match href=reference/variable-reference-without-whitespace-ref.html>
>+<link rel=help href=http://www.w3.org/TR/css-variables-1/#syntax>
>+<link rel=author title="Simon Sapin" href=http://exyr.org/about/>
>+<meta rel=assert content="
>+    A variable reference followed by something without whitespace in between
>+    must not be interpreted together as a single identifier.
>+    Custom property values are sequences of tokens, not strings.">
>+<style>
>+p {
>+    counter-reset: -- --a -a;
>+    --dash:-;
>+}
>+
>+#test_1 span::before {
>+    counter-increment: var(--dash)-;
>+    content: counter(--);
>+}
>+#test_2 span::before {
>+    counter-increment: var(--dash)-a;
>+    content: counter(--a);
>+}
>+#test_3 span::before {
>+    counter-increment: var(--dash)a;
>+    content: counter(-a);
>+}
>+
>+#control_1 span::before {
>+    counter-increment: --;
>+    content: counter(--);
>+}
>+#control_2 span::before {
>+    counter-increment: --a;
>+    content: counter(--a);
>+}
>+#control_3 span::before {
>+    counter-increment: -a;
>+    content: counter(-a);
>+}
>+</style>
>+<p>The next four lines must be identical, containing only zeroes:
>+<p id="test_1"><span></span> <span></span> <span></span>
>+<p id="test_2"><span></span> <span></span> <span></span>
>+<p id="test_3"><span></span> <span></span> <span></span>
>+<p>0 0 0
>+
>+<p>The next four lines must be identical, containing increasing integers:
>+<p id="control_1"><span></span> <span></span> <span></span>
>+<p id="control_2"><span></span> <span></span> <span></span>
>+<p id="control_3"><span></span> <span></span> <span></span>
>+<p>1 2 3
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6634adf1f9b72daa2d2632e1b35356354947d36f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference.html
>@@ -0,0 +1,67 @@
>+<!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" />
>+    <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+
>+    
>+    <style id="variable-reference-left-open">
>+        div
>+        {
>+            width: var(--prop</style>
>+</head>
>+<body>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    var testcases = [
>+        { cssText: "width: var(--prop);",                   expectedPropertyValue: "var(--prop)" },
>+        { cssText: "width: var(--prop) !important;",        expectedPropertyValue: "var(--prop)" },
>+        { cssText: "width: var(--prop, );",                 expectedPropertyValue: "var(--prop, )" },
>+        { cssText: "width: var(--prop, 20px);",             expectedPropertyValue: "var(--prop, 20px)" },
>+        { cssText: "width: var(--prop, blue);",             expectedPropertyValue: "var(--prop, blue)" },
>+        { cssText: "width: var(--prop1, var(--prop2));",    expectedPropertyValue: "var(--prop1, var(--prop2))" },
>+        { cssText: "width: var(--prop1, var(--prop2, var(--prop3, auto)));", expectedPropertyValue: "var(--prop1, var(--prop2, var(--prop3, auto)))" },
>+        { cssText: "width: var(--prop1) var(--prop2)",      expectedPropertyValue: "var(--prop1) var(--prop2)" },
>+
>+        { cssText: "width: var();",                         expectedPropertyValue: "" },
>+        { cssText: "width: var(prop);",                     expectedPropertyValue: "" },
>+        { cssText: "width: var(-prop);",                    expectedPropertyValue: "" },
>+        { cssText: "width: var(--prop,);",                  expectedPropertyValue: "" },
>+        { cssText: "width: var(--prop 20px);",              expectedPropertyValue: "" },
>+        { cssText: "width: var(--prop, var(prop));",        expectedPropertyValue: "" },
>+        { cssText: "width: var(--prop, var(-prop));",       expectedPropertyValue: "" },
>+        { cssText: "width: var(20px);",                     expectedPropertyValue: "" },
>+        { cssText: "width: var(var(--prop));",              expectedPropertyValue: "" },
>+    ];
>+
>+    testcases.forEach(function (testcase) {
>+        test( function () {
>+            var div = document.createElement("div");
>+            document.body.appendChild(div);
>+            div.style.cssText = testcase.cssText;
>+            var actualPropertyValue = div.style.getPropertyValue("width").trim();
>+            assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
>+            document.body.removeChild(div);
>+        }, testcase.cssText);
>+    });
>+
>+    test( function() {
>+            var actualPropertyValue = document.getElementById("variable-reference-left-open").sheet.cssRules[0].style.getPropertyValue("width").trim();
>+            assert_equals(actualPropertyValue, "var(--prop");
>+        }, "Variable reference left open at end of stylesheet");
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..74a6c748605a5bc6a702b300eebc51fb1a970f59
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties-expected.txt
>@@ -0,0 +1,12 @@
>+
>+PASS background-attachment 
>+PASS background-clip 
>+PASS background-color 
>+PASS background-origin 
>+PASS background-position 
>+PASS background-repeat 
>+PASS background-size 
>+PASS background-image-url 
>+PASS background-image-linear-gradient 
>+PASS background-image-radial-gradient 
>+         
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..1f19bc5f4c0e3dc72a651d122ddd09f855068bbe
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties.html
>@@ -0,0 +1,108 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>test background property variable substitution</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/#variables-in-shorthands">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        .testArea {
>+            width: 16px;
>+            height: 16px;
>+            display: inline-block;
>+            background-image: url("../../../../images/green.png");
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="log"></div>
>+    <div class="testArea" id="background-attachment" style="--foo: fixed; background-attachment: var(--foo);"></div>
>+    <div class="testArea" id="background-clip" style="--foo: padding-box; background-clip: var(--foo);"></div>
>+    <div class="testArea" id="background-color" style="background-image: none; --foo: rgb(0, 128, 0); background-color: var(--foo);"></div>
>+    <div class="testArea" id="background-origin" style="--foo: content-box; background-origin: var(--foo);"></div>
>+    <div class="testArea" id="background-position" style="--foo: 0% 50%; background-position: var(--foo);"></div>
>+    <div class="testArea" id="background-repeat" style="--foo: repeat-x; background-repeat: var(--foo);"></div>
>+    <div class="testArea" id="background-size" style="--foo: cover; background-size: var(--foo);"></div>
>+    <div class="testArea" id="background-image-url" style="--foo: url('../../../../images/green-16x16.png'); background-image: var(--foo);"></div>
>+    <div class="testArea" id="background-image-linear-gradient" style="--location: bottom; background-image: linear-gradient(to var(--location), rgb(30,87,0) 0%,rgb(125,232,185) 100%);"></div>
>+    <div class="testArea" id="background-image-radial-gradient" style="--shape: ellipse; --location: farthest-corner; background-image: radial-gradient(var(--shape) var(--location) at 25px 25px, black 10%, green 90%);"></div>
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        let templates = [
>+            {
>+                testName:"background-attachment",
>+                propertyName:"background-attachment",
>+                expectedValue:"fixed",
>+            },
>+            {
>+                testName:"background-clip",
>+                propertyName:"background-clip",
>+                expectedValue:"padding-box",
>+            },
>+            {
>+                testName:"background-color",
>+                propertyName:"background-color",
>+                expectedValue:"rgb(0, 128, 0)",
>+            },
>+            {
>+                testName:"background-origin",
>+                propertyName:"background-origin",
>+                expectedValue:"content-box",
>+            },
>+            {
>+                testName:"background-position",
>+                propertyName:"background-position",
>+                expectedValue:"0% 50%",
>+            },
>+            {
>+                testName:"background-repeat",
>+                propertyName:"background-repeat",
>+                expectedValue:"repeat-x",
>+            },
>+            {
>+                testName:"background-size",
>+                propertyName:"background-size",
>+                expectedValue:"cover",
>+            },
>+            {
>+                testName:"background-image-url",
>+                propertyName:"background-image",
>+                expectedValue:"url(\"../../../../images/green-16x16.png\")",
>+            },
>+            {
>+                testName:"background-image-linear-gradient",
>+                propertyName:"background-image",
>+                expectedValue:"linear-gradient(rgb(30, 87, 0) 0%, rgb(125, 232, 185) 100%)",
>+            },
>+            {
>+                testName:"background-image-radial-gradient",
>+                propertyName:"background-image",
>+                expectedValue:"radial-gradient(at 25px 25px, black 10%, green 90%)",
>+            },
>+        ];
>+
>+        templates.forEach(function (template) {
>+            test( function () {
>+                let target = document.getElementById(template.testName);
>+                let computedStyle = window.getComputedStyle(target);
>+                let value = computedStyle.getPropertyValue(template.propertyName);
>+
>+                if (template.testName != "background-image-url")
>+                {
>+                    assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+                }
>+                else
>+                {
>+                    assert_regexp_match(value, /green-16x16/, "Actual value should contain expected substring");
>+                }
>+            }, template.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..0cfdaac31d615a881b29b6903500df8517983bdf
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic-expected.txt
>@@ -0,0 +1,14 @@
>+
>+PASS Simple substitution test 
>+PASS You can't build up a single token where part of it is provided by a variable 
>+PASS Multiple variable references in a single property 
>+PASS Multiple variable references in a single property (no spaces) 
>+PASS Fallback value 
>+PASS Fallback value which is also a variable reference 
>+PASS Multiple var references in fallback value 
>+PASS Multiple nested fallbacks 
>+PASS Bad variable reference that should inherit by default 
>+PASS Test that var reference doesnÃ¢â¬â¢t overwrite !important 
>+PASS Test that !important on a property that has a variable reference can overwrite !important 
>+PASS Test that !important inside of var reference can't overwrite !important on property 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c2b29229d7317f755109294c28feebc950111824
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic.html
>@@ -0,0 +1,118 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>test basic variable substitution</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        #testArea {
>+            color: orange;
>+        }
>+        #testArea  > div {
>+            width: 50px !important;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="log"></div>
>+    <div id="testArea"></div>
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        let templates = [
>+            {
>+                testName:"Simple substitution test",
>+                propertyName:"border-spacing",
>+                expectedValue:"20px 20px",
>+                style:"--gap: 20px;border-spacing: var(--gap);"
>+            },
>+            {
>+                testName:"You can't build up a single token where part of it is provided by a variable",
>+                propertyName:"border-spacing",
>+                expectedValue:"0px 0px",
>+                style:"--gap: 20;border-spacing: var(--gap)px;"
>+            },
>+            {
>+                testName:"Multiple variable references in a single property",
>+                propertyName:"border-spacing",
>+                expectedValue:"19px 47px",
>+                style:"--gap1: 19px;--gap2: 47px;border-spacing: var(--gap1) var(--gap2);"
>+            },
>+            {
>+                testName:"Multiple variable references in a single property (no spaces)",
>+                propertyName:"border-spacing",
>+                expectedValue:"23px 59px",
>+                style:"--gap1:23px;--gap2:59px;border-spacing:var(--gap1)var(--gap2);"
>+            },
>+            {
>+                testName:"Fallback value",
>+                propertyName:"border-spacing",
>+                expectedValue:"11px 11px",
>+                style:"border-spacing:var(--gap,11px);"
>+            },
>+            {
>+                testName:"Fallback value which is also a variable reference",
>+                propertyName:"border-spacing",
>+                expectedValue:"27px 27px",
>+                style:"--gap2: 27px; border-spacing:var(--gap,var(--gap2));"
>+            },
>+            {
>+                testName:"Multiple var references in fallback value",
>+                propertyName:"border-spacing",
>+                expectedValue:"66px 92px",
>+                style:"--gap2: 66px; --gap3: 92px; border-spacing:var(--gap,var(--gap2)var(--gap3));"
>+            },
>+            {
>+                testName:"Multiple nested fallbacks",
>+                propertyName:"border-spacing",
>+                expectedValue:"98px 18px",
>+                style:"--gap4: 98px 18px; border-spacing:var(--gap1,var(--gap2,var(--gap3,var(--gap4,var(--gap5)))));"
>+            },
>+            {
>+                testName:"Bad variable reference that should inherit by default",
>+                propertyName:"color",
>+                expectedValue:"rgb(255, 165, 0)",
>+                style:"color: var(--colorVar) pink;"
>+            },
>+            {
>+                testName:"Test that var reference doesnât overwrite !important",
>+                propertyName:"width",
>+                expectedValue:"50px",
>+                style:"--varWidth: 28px; width: var(--varWidth);"
>+            },
>+            {
>+                testName:"Test that !important on a property that has a variable reference can overwrite !important",
>+                propertyName:"width",
>+                expectedValue:"28px",
>+                style:"--varWidth: 28px; width: var(--varWidth) !important;"
>+            },
>+            {
>+                testName:"Test that !important inside of var reference can't overwrite !important on property",
>+                propertyName:"width",
>+                expectedValue:"50px",
>+                style:"--varWidth: 28px !important; width: var(--varWidth);"
>+            },
>+        ];
>+
>+        let testArea = document.getElementById("testArea");
>+
>+        templates.forEach(function (template) {
>+            test( function () {
>+                let div = document.createElement("div");
>+                div.style.cssText = template.style;
>+                testArea.appendChild(div);
>+                let computedStyle = window.getComputedStyle(div);
>+                let value = computedStyle.getPropertyValue(template.propertyName);
>+                assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+                testArea.removeChild(div);
>+            }, template.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>\ No newline at end of file
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..0662c96218223b64bde9c50b334d3a380dae5a9a
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters-expected.txt
>@@ -0,0 +1,9 @@
>+
>+PASS blur 
>+PASS brightness 
>+PASS contrast 
>+PASS grayscale 
>+PASS invert 
>+PASS sepia 
>+PASS saturate 
>+    
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..44b395210b09079fda7eb2634d03e03045f645c3
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters.html
>@@ -0,0 +1,77 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>test filter function variable substitution</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        .testArea {
>+            width: 250px;
>+            height: 167px;
>+            display: inline-block;
>+            background-image: url("../../../../images/a.jpg");
>+            background-size: contain;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="log"></div>
>+    <div class="testArea" id="blur" style="--blur: 15px; filter: blur(var(--blur));"></div>
>+    <div class="testArea" id="brightness" style="--foo: 0.5; filter: brightness(var(--foo));"></div>
>+    <div class="testArea" id="contrast" style="--foo: 2; filter: contrast(var(--foo));"></div>
>+    <div class="testArea" id="grayscale" style="--foo: 1; filter: grayscale(var(--foo));"></div>
>+    <div class="testArea" id="invert" style="--foo: 1; filter: invert(var(--foo));"></div>
>+    <div class="testArea" id="sepia" style="--foo: 1; filter: sepia(var(--foo));"></div>
>+    <div class="testArea" id="saturate" style="--foo: 8; filter: saturate(var(--foo));"></div>
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        let templates = [
>+            {
>+                testName:"blur",
>+                expectedValue:"blur(15px)",
>+            },
>+            {
>+                testName:"brightness",
>+                expectedValue:"brightness(0.5)",
>+            },
>+            {
>+                testName:"contrast",
>+                expectedValue:"contrast(2)",
>+            },
>+            {
>+                testName:"grayscale",
>+                expectedValue:"grayscale(1)",
>+            },
>+            {
>+                testName:"invert",
>+                expectedValue:"invert(1)",
>+            },
>+            {
>+                testName:"sepia",
>+                expectedValue:"sepia(1)",
>+            },
>+            {
>+                testName:"saturate",
>+                expectedValue:"saturate(8)",
>+            },
>+        ];
>+
>+        templates.forEach(function (template) {
>+            test( function () {
>+                let target = document.getElementById(template.testName);
>+                let computedStyle = window.getComputedStyle(target);
>+                let value = computedStyle.getPropertyValue("filter");
>+                assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+            }, template.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..6ae6688320ae676d60dc140833cd1b0b712a2199
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow-expected.txt
>@@ -0,0 +1,6 @@
>+This div should have green text and a green shadow.
>+
>+PASS box-shadow 
>+PASS --alpha 
>+PASS color 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..85f67601f4670b09813f6faba7ec60d5c435ddaa
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html
>@@ -0,0 +1,52 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>box-shadow + variable substitution on same element</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <div id="target" style="box-shadow: 1px 1px 1px green; color: var(--alpha); --alpha: green;">This div should have green text and a green shadow.</div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+        let target = document.getElementById('target');
>+        let computedStyle = window.getComputedStyle(target);
>+
>+        let templates = [
>+            {
>+                testName:"box-shadow",
>+                value: computedStyle.boxShadow,
>+                potentialValues: ["1px 1px 1px green", "rgb(0, 128, 0) 1px 1px 1px 0px"],
>+                description: "Expected value should be 1px 1px 1px green or rgb(0, 128, 0) 1px 1px 1px 0px"
>+            },
>+            {
>+                testName:"--alpha",
>+                value: computedStyle.getPropertyValue("--alpha").trim(),
>+                potentialValues: ["green"],
>+                description: "Expected value is green"
>+            },
>+            {
>+                testName:"color",
>+                value: computedStyle.color,
>+                potentialValues: ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
>+                description: "Expected value to be rgb(0, 128, 0) or rgba(0, 128, 0, 1)"
>+            }
>+        ];
>+
>+        templates.forEach(function (template) {
>+            test( function () {
>+                assert_in_array(template.value, template.potentialValues, template.description);
>+            }, template.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..28f243e826019b036a2c1a67ab966b79a2fcca3e
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size-expected.txt
>@@ -0,0 +1,9 @@
>+   
>+
>+PASS width on IFRAME 
>+PASS height on IFRAME 
>+PASS width on INPUT 
>+PASS height on INPUT 
>+PASS width on CANVAS 
>+PASS height on CANVAS 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..6d705d31488a972f94bf705f3eb8fc3aede0b1f0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size.html
>@@ -0,0 +1,48 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>variable substitution into size properties on certain replaced elements</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        .testcases > *
>+        {
>+            border: none;
>+            --w: 10px;
>+            --h: 10px;
>+            width: calc(var(--w) + 20px);
>+            height: calc(var(--h) + 20px);
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div class="testcases">
>+        <iframe></iframe>
>+        <input type="text">
>+        <canvas></canvas>
>+    </div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        var testcases = document.querySelectorAll(".testcases > *");
>+        for (var i = 0; i < testcases.length; i++)
>+        {
>+            test(function() {
>+                assert_equals(window.getComputedStyle(testcases[i]).width, "30px");
>+                }, "width on " + testcases[i].tagName);
>+            test(function() {
>+                assert_equals(window.getComputedStyle(testcases[i]).height, "30px");
>+                }, "height on " + testcases[i].tagName);
>+        }
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..70a0c965e5a6a85210f429c13243e475ee794f60
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties-expected.txt
>@@ -0,0 +1,4 @@
>+
>+PASS box-shadow 
>+PASS text-shadow 
>+box-shadow text-shadow
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9a77bce075daf8ce2d9c2870332b90c652d985e7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html
>@@ -0,0 +1,50 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>test shadow property variable substitution</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/#defining-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        .testArea {
>+            width: 100px;
>+            height: 100px;
>+            display: inline-block;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="log"></div>
>+    <div class="testArea" id="box-shadow" style="--foo: rgb(0, 128, 0); box-shadow: 1px 1px 1px 1px var(--foo);">box-shadow</div>
>+    <div class="testArea" id="text-shadow" style="--foo: rgb(0, 128, 0); text-shadow: 1px 1px 1px var(--foo);">text-shadow</div>
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        let templates = [
>+            {
>+                testName:"box-shadow",
>+                expectedValue:"rgb(0, 128, 0) 1px 1px 1px 1px",
>+            },
>+            {
>+                testName:"text-shadow",
>+                expectedValue:"rgb(0, 128, 0) 1px 1px 1px",
>+            },
>+        ];
>+
>+        templates.forEach(function (template) {
>+            test( function () {
>+                let target = document.getElementById(template.testName);
>+                let computedStyle = window.getComputedStyle(target);
>+                let value = computedStyle.getPropertyValue(template.testName);
>+                assert_equals(value, template.expectedValue, "Expected Value should match actual value");
>+            }, template.testName);
>+        });
>+    </script>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..56a2c49744e869b00420e27873889d79415ff510
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands-expected.txt
>@@ -0,0 +1,53 @@
>+
>+PASS target1 margin-left 
>+PASS target1 margin-top 
>+PASS target1 margin-right 
>+PASS target1 margin-bottom 
>+PASS target2 margin-left 
>+PASS target2 margin-top 
>+PASS target2 margin-right 
>+PASS target2 margin-bottom 
>+PASS target3 margin-left 
>+PASS target3 margin-top 
>+PASS target3 margin-right 
>+PASS target3 margin-bottom 
>+PASS target4 margin-left 
>+PASS target4 margin-top 
>+PASS target4 margin-right 
>+PASS target4 margin-bottom 
>+PASS target5 border-top-width 
>+PASS target5 border-top-style 
>+PASS target5 border-top-color 
>+PASS target5 border-right-width 
>+PASS target5 border-right-style 
>+PASS target5 border-right-color 
>+PASS target5 border-bottom-width 
>+PASS target5 border-bottom-style 
>+PASS target5 border-bottom-color 
>+PASS target5 border-left-width 
>+PASS target5 border-left-style 
>+PASS target5 border-left-color 
>+PASS target6 border-top-width 
>+PASS target6 border-top-style 
>+PASS target6 border-top-color 
>+PASS target6 border-right-width 
>+PASS target6 border-right-style 
>+PASS target6 border-right-color 
>+PASS target6 border-bottom-width 
>+PASS target6 border-bottom-style 
>+PASS target6 border-bottom-color 
>+PASS target6 border-left-width 
>+PASS target6 border-left-style 
>+PASS target6 border-left-color 
>+PASS target7 margin-left 
>+PASS target7 margin-top 
>+PASS target7 margin-right 
>+PASS target7 margin-bottom 
>+PASS target8 transition-duration 
>+PASS target9 border-left-width 
>+PASS target9 border-left-style 
>+PASS target9 border-left-color 
>+PASS target9 border-top-width 
>+PASS target9 border-right-width 
>+PASS target9 border-bottom-width 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c501d56abdb8443d8abc78fa860f671eaa0d54cd
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands.html
>@@ -0,0 +1,117 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>Test shorthand variable substitution</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/#variables-in-shorthands">
>+
>+    <style>
>+        #target7parent > #target7 {
>+            margin: var(--invalid); /* invalid at compute time */
>+        }
>+
>+        #target7 {
>+            margin: 77px;
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+<div id="target1" style="--prop: 8px; margin: var(--prop); margin-top: 10px"></div>
>+<div id="target2" style="--prop: 8px; margin: var(--prop) !important; margin-top: 10px"></div>
>+<div id="target3" style="--prop: 8px; margin-top: 10px !important; margin: var(--prop);"></div>
>+<div id="target4" style="--prop: 3px 5px 7px 11px; margin: var(--prop);"></div>
>+<div id="target5" style="--border1: 5px solid rgb(0, 0, 0); --border2: 3px dotted red; border-left: var(--border2); border: var(--border1);"></div>
>+<div id="target6" style="--border1: 5px solid rgb(0, 0, 0); --border2: 3px dotted red; border: var(--border1); border-left: var(--border2);"></div>
>+<div id="target7parent">
>+    <div id="target7"></div>
>+</div>
>+<div id="target8" style="transition: opacity var(--duration); --duration: 2s"></div>
>+<div id="target9" style="border-style: dashed; --border1: 5px solid rgb(0, 0, 0); --border2: 3px dotted red; --width: 1px; border-left: var(--border1); border-width: var(--width);"></div>
>+<script type="text/javascript">
>+    "use strict";
>+    // Set a value via CSSOM to test precedence over markup values
>+    document.getElementById("target9").style.borderLeft = "var(--border2)";
>+</script>
>+
>+<script type="text/javascript">
>+    "use strict";
>+
>+    var testcases = [
>+        { element: "target1",   propertyName: "margin-left",    expectedPropertyValue: "8px" },
>+        { element: "target1",   propertyName: "margin-top",     expectedPropertyValue: "10px" },
>+        { element: "target1",   propertyName: "margin-right",   expectedPropertyValue: "8px" },
>+        { element: "target1",   propertyName: "margin-bottom",  expectedPropertyValue: "8px" },
>+
>+        { element: "target2",   propertyName: "margin-left",    expectedPropertyValue: "8px" },
>+        { element: "target2",   propertyName: "margin-top",     expectedPropertyValue: "8px" },
>+        { element: "target2",   propertyName: "margin-right",   expectedPropertyValue: "8px" },
>+        { element: "target2",   propertyName: "margin-bottom",  expectedPropertyValue: "8px" },
>+
>+        { element: "target3",   propertyName: "margin-left",    expectedPropertyValue: "8px" },
>+        { element: "target3",   propertyName: "margin-top",     expectedPropertyValue: "10px" },
>+        { element: "target3",   propertyName: "margin-right",   expectedPropertyValue: "8px" },
>+        { element: "target3",   propertyName: "margin-bottom",  expectedPropertyValue: "8px" },
>+
>+        { element: "target4",   propertyName: "margin-left",    expectedPropertyValue: "11px" },
>+        { element: "target4",   propertyName: "margin-top",     expectedPropertyValue: "3px" },
>+        { element: "target4",   propertyName: "margin-right",   expectedPropertyValue: "5px" },
>+        { element: "target4",   propertyName: "margin-bottom",  expectedPropertyValue: "7px" },
>+
>+        { element: "target5",   propertyName: "border-top-width",       expectedPropertyValue: "5px" },
>+        { element: "target5",   propertyName: "border-top-style",       expectedPropertyValue: "solid" },
>+        { element: "target5",   propertyName: "border-top-color",       expectedPropertyValue: "rgb(0, 0, 0)" },
>+        { element: "target5",   propertyName: "border-right-width",     expectedPropertyValue: "5px" },
>+        { element: "target5",   propertyName: "border-right-style",     expectedPropertyValue: "solid" },
>+        { element: "target5",   propertyName: "border-right-color",     expectedPropertyValue: "rgb(0, 0, 0)" },
>+        { element: "target5",   propertyName: "border-bottom-width",    expectedPropertyValue: "5px" },
>+        { element: "target5",   propertyName: "border-bottom-style",    expectedPropertyValue: "solid" },
>+        { element: "target5",   propertyName: "border-bottom-color",    expectedPropertyValue: "rgb(0, 0, 0)" },
>+        { element: "target5",   propertyName: "border-left-width",      expectedPropertyValue: "5px" },
>+        { element: "target5",   propertyName: "border-left-style",      expectedPropertyValue: "solid" },
>+        { element: "target5",   propertyName: "border-left-color",      expectedPropertyValue: "rgb(0, 0, 0)" },
>+
>+        { element: "target6",   propertyName: "border-top-width",       expectedPropertyValue: "5px" },
>+        { element: "target6",   propertyName: "border-top-style",       expectedPropertyValue: "solid" },
>+        { element: "target6",   propertyName: "border-top-color",       expectedPropertyValue: "rgb(0, 0, 0)" },
>+        { element: "target6",   propertyName: "border-right-width",     expectedPropertyValue: "5px" },
>+        { element: "target6",   propertyName: "border-right-style",     expectedPropertyValue: "solid" },
>+        { element: "target6",   propertyName: "border-right-color",     expectedPropertyValue: "rgb(0, 0, 0)" },
>+        { element: "target6",   propertyName: "border-bottom-width",    expectedPropertyValue: "5px" },
>+        { element: "target6",   propertyName: "border-bottom-style",    expectedPropertyValue: "solid" },
>+        { element: "target6",   propertyName: "border-bottom-color",    expectedPropertyValue: "rgb(0, 0, 0)" },
>+        { element: "target6",   propertyName: "border-left-width",      expectedPropertyValue: "3px" },
>+        { element: "target6",   propertyName: "border-left-style",      expectedPropertyValue: "dotted" },
>+        { element: "target6",   propertyName: "border-left-color",      expectedPropertyValue: "rgb(255, 0, 0)" },
>+
>+        { element: "target7",   propertyName: "margin-left",    expectedPropertyValue: "0px" },
>+        { element: "target7",   propertyName: "margin-top",     expectedPropertyValue: "0px" },
>+        { element: "target7",   propertyName: "margin-right",   expectedPropertyValue: "0px" },
>+        { element: "target7",   propertyName: "margin-bottom",  expectedPropertyValue: "0px" },
>+
>+        { element: "target8",   propertyName: "transition-duration",    expectedPropertyValue: "2s" },
>+
>+        { element: "target9",   propertyName: "border-left-width",      expectedPropertyValue: "3px" },
>+        { element: "target9",   propertyName: "border-left-style",      expectedPropertyValue: "dotted" },
>+        { element: "target9",   propertyName: "border-left-color",      expectedPropertyValue: "rgb(255, 0, 0)" },
>+        { element: "target9",   propertyName: "border-top-width",       expectedPropertyValue: "1px" },
>+        { element: "target9",   propertyName: "border-right-width",     expectedPropertyValue: "1px" },
>+        { element: "target9",   propertyName: "border-bottom-width",    expectedPropertyValue: "1px" },
>+    ];
>+
>+    testcases.forEach(function (testcase) {
>+        test( function () {
>+            var div = document.getElementById(testcase.element);
>+            var actualPropertyValue = window.getComputedStyle(div).getPropertyValue(testcase.propertyName);
>+            assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
>+        }, testcase.element + " " + testcase.propertyName);
>+    });
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..895e043cdb43cdcdf3911a4a423686f33780d6bf
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration-expected.txt
>@@ -0,0 +1,33 @@
>+
>+PASS target1 --var2 
>+PASS target1 margin-top 
>+PASS target1 margin-right 
>+PASS target1 margin-bottom 
>+PASS target1 margin-left 
>+PASS target2parent --var1 
>+PASS target2parent --var2 
>+PASS target2 --var1 
>+PASS target2 --var2 
>+PASS target3 --var1 
>+PASS target3 --var2 
>+PASS target4 --varA 
>+PASS target4 --varB 
>+PASS target4 --varC 
>+PASS target5 --varA 
>+PASS target5 --varB 
>+PASS target5 --varC 
>+PASS target6 --varA 
>+PASS target6 --varB 
>+PASS target6 --varC 
>+PASS target7 --varA 
>+PASS target7 --varB 
>+PASS target7 --varC 
>+PASS target8 --varA 
>+PASS target8 --varB 
>+PASS target9 --varA 
>+PASS target9 --varB 
>+PASS target9 --varC 
>+PASS target10 --varA 
>+PASS target10 --varB 
>+PASS target10 --varC 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..140b3db47f55fc8b4709e0bed84d7bff198749c2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html
>@@ -0,0 +1,155 @@
>+<!DOCTYPE html>
>+<html lang="en">
>+<head>
>+    <meta charset="UTF-8">
>+    <title>Testing substituting variable references inside of variable declerations</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/#using-variables">
>+
>+    <script src="/resources/testharness.js"></script>
>+    <script src="/resources/testharnessreport.js"></script>
>+    <style>
>+        #target1 {
>+            margin: var(--var2);
>+            --var2: var(--var1) 10px;
>+            --var1: var(--var0) 13px 17px;
>+            --var0: 23px;
>+        }
>+
>+        #target2parent {
>+            --var2: var(--var1, fallback);
>+            --var1: var(--var2, fallback);
>+        }
>+        #target2 {
>+            --var1: good;
>+        }
>+
>+        #target3 {
>+            --var2: var(--var1, 3px);
>+            --var1: var(--var0, 5px);
>+        }
>+
>+        #target4 {
>+            --varA: var(--varB);
>+            --varB: var(--varA);
>+            --varC: var(--varB,13px);
>+        }
>+
>+        #target5 {
>+            --varA: var(--varB);
>+            --varB: var(--varA) var(--varC);
>+            --varC: var(--varB,13px);
>+        }
>+
>+        #target6 {
>+            --varA: var(--varB);
>+            --varB: var(--varA) var(--varDoesNotExist,var(--varC));
>+            --varC: var(--varB,13px);
>+        }
>+
>+        #target7 {
>+            --varDoesExist: 5px;
>+            --varA: var(--varB);
>+            --varB: var(--varA) var(--varDoesExist,var(--varC));
>+            --varC: var(--varB,13px);
>+        }
>+
>+        #target8 {
>+            --varA: var(--varA, 9px);
>+            --varB: var(--varA, 7px);
>+        }
>+
>+        #target9 {
>+            --varA: good;
>+            --varB: very var(--varA, var(--varC));
>+            --varC: var(--varB);
>+        }
>+
>+        #target10parent {
>+            --varA: good;
>+            --varB: Also good;
>+            --varC: another good one;
>+        }
>+
>+        #target10 {
>+            --varA: var(--varB);
>+            --varB: var(--varA);
>+            --varC: var(--varB);
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="target1"></div>
>+    <div id="target2parent">
>+        <div id="target2"></div>
>+    </div>
>+    <div id="target3"></div>
>+    <div id="target4"></div>
>+    <div id="target5"></div>
>+    <div id="target6"></div>
>+    <div id="target7"></div>
>+    <div id="target8"></div>
>+    <div id="target9"></div>
>+    <div id="target10parent">
>+        <div id="target10"></div>
>+    </div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        var testcases = [
>+            { element: "target1",       propertyName: "--var2",         expectedPropertyValue: "   23px 13px 17px 10px" },
>+            { element: "target1",       propertyName: "margin-top",     expectedPropertyValue: "23px" },
>+            { element: "target1",       propertyName: "margin-right",   expectedPropertyValue: "13px" },
>+            { element: "target1",       propertyName: "margin-bottom",  expectedPropertyValue: "17px" },
>+            { element: "target1",       propertyName: "margin-left",    expectedPropertyValue: "10px" },
>+
>+            { element: "target2parent", propertyName: "--var1",         expectedPropertyValue: "" },
>+            { element: "target2parent", propertyName: "--var2",         expectedPropertyValue: "" },
>+            { element: "target2",       propertyName: "--var1",         expectedPropertyValue: " good" },
>+            { element: "target2",       propertyName: "--var2",         expectedPropertyValue: "" },
>+
>+            { element: "target3",       propertyName: "--var1",         expectedPropertyValue: "  5px" },
>+            { element: "target3",       propertyName: "--var2",         expectedPropertyValue: "   5px" },
>+
>+            { element: "target4",       propertyName: "--varA",         expectedPropertyValue: "" },
>+            { element: "target4",       propertyName: "--varB",         expectedPropertyValue: "" },
>+            { element: "target4",       propertyName: "--varC",         expectedPropertyValue: " 13px" },
>+
>+            { element: "target5",       propertyName: "--varA",         expectedPropertyValue: "" },
>+            { element: "target5",       propertyName: "--varB",         expectedPropertyValue: "" },
>+            { element: "target5",       propertyName: "--varC",         expectedPropertyValue: "" },
>+
>+            { element: "target6",       propertyName: "--varA",         expectedPropertyValue: "" },
>+            { element: "target6",       propertyName: "--varB",         expectedPropertyValue: "" },
>+            { element: "target6",       propertyName: "--varC",         expectedPropertyValue: "" },
>+
>+            { element: "target7",       propertyName: "--varA",         expectedPropertyValue: "" },
>+            { element: "target7",       propertyName: "--varB",         expectedPropertyValue: "" },
>+            { element: "target7",       propertyName: "--varC",         expectedPropertyValue: "" },
>+
>+            { element: "target8",       propertyName: "--varA",         expectedPropertyValue: "" },
>+            { element: "target8",       propertyName: "--varB",         expectedPropertyValue: "  7px" },
>+
>+            { element: "target9",       propertyName: "--varA",         expectedPropertyValue: " good" },
>+            { element: "target9",       propertyName: "--varB",         expectedPropertyValue: "" },
>+            { element: "target9",       propertyName: "--varC",         expectedPropertyValue: "" },
>+
>+            { element: "target10",      propertyName: "--varA",         expectedPropertyValue: "" },
>+            { element: "target10",      propertyName: "--varB",         expectedPropertyValue: "" },
>+            { element: "target10",      propertyName: "--varC",         expectedPropertyValue: "" },
>+        ];
>+
>+        testcases.forEach(function (testcase) {
>+            test( function () {
>+                var div = document.getElementById(testcase.element);
>+                var actualPropertyValue = window.getComputedStyle(div).getPropertyValue(testcase.propertyName);
>+                assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
>+            }, testcase.element + " " + testcase.propertyName);
>+        });
>+    </script>
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..d0a3a0ceb1ea6bfdc0544f16c6db0bc823ce83f4
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value-expected.txt
>@@ -0,0 +1,9 @@
>+This text should transition from black to green over a period of 1 second.
>+
>+Harness Error (TIMEOUT), message = null
>+
>+PASS Verify CSS variable value before transition 
>+PASS Verify substituted color value before transition 
>+NOTRUN Verify CSS variable value after transition 
>+NOTRUN Verify substituted color value after transition 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..eb9be3126a63cbda61e137986161f65d3de8be75
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value.html
>@@ -0,0 +1,66 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Transitions - From no value to value</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>
>+        #target
>+        {
>+            transition-property: --value;
>+            transition-duration: 1s;
>+        }
>+        #target
>+        {
>+            color: var(--value);
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target">This text should transition from black 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(), "", "--value has no value before transition runs");
>+        }, "Verify CSS variable value before transition");
>+
>+    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, 0)", "rgba(0, 0, 0, 1)"],
>+            "color is black before transition runs");
>+        }, "Verify substituted color value before transition");
>+
>+    var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
>+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
>+        }));
>+
>+    var afterAnimationColorTest = async_test("Verify substituted color value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(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 transition runs")
>+        }));
>+
>+    // Trigger transition
>+    document.getElementById("target").setAttribute("style", "--value: green");
>+
>+    // Force another layout pass
>+    document.documentElement.offsetHeight;
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..048bbdfd564773654404c021b45733eaba62c6bc
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value-expected.txt
>@@ -0,0 +1,9 @@
>+This text should transition from green to black over a period of 1 second.
>+
>+Harness Error (TIMEOUT), message = null
>+
>+PASS Verify CSS variable value before transition 
>+PASS Verify substituted color value before transition 
>+NOTRUN Verify CSS variable value after transition 
>+NOTRUN Verify substituted color value after transition 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..1251e0bf5bee0ec790dfa2547cc4e76a63fbc496
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value.html
>@@ -0,0 +1,66 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Transitions - From value to no value</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>
>+        #target
>+        {
>+            transition-property: --value;
>+            transition-duration: 1s;
>+        }
>+        #target
>+        {
>+            color: var(--value);
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target" style="--value: green">This text should transition from green to black 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(), "green", "--value is green before transition runs");
>+        }, "Verify CSS variable value before transition");
>+
>+    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, 128, 0)", "rgba(0, 128, 0, 1)"],
>+            "color is green before transition runs");
>+        }, "Verify substituted color value before transition");
>+
>+    var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
>+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "", "--value has no value after transition runs")
>+        }));
>+
>+    var afterAnimationColorTest = async_test("Verify substituted color value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
>+        assert_in_array(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(),
>+            ["rgb(0, 0, 0)", "rgba(0, 0, 0, 1)"],
>+            "color is black after transition runs")
>+        }));
>+
>+    // Trigger transition
>+    document.getElementById("target").removeAttribute("style");
>+
>+    // Force another layout pass
>+    document.documentElement.offsetHeight;
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..ceac0868f46187da1633305db2f92b99d82eb52c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value-expected.txt
>@@ -0,0 +1,7 @@
>+This text should transition from blue to green over a period of 1 second.
>+
>+PASS Verify CSS variable value before transition 
>+PASS Verify substituted color value before transition 
>+PASS Verify CSS variable value after transition 
>+PASS Verify substituted color value after transition 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5e54cd930f92208d29bd321aaf8880f97b1ab420
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value.html
>@@ -0,0 +1,72 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Transitions - Variable value specified before transition; 'all' keyword used</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>
>+        #target
>+        {
>+            transition-property: all;
>+            transition-duration: 1s;
>+        }
>+        #target
>+        {
>+            --value: blue;
>+            color: var(--value);
>+        }
>+        #target.changed
>+        {
>+            --value: green;
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target">This text should transition 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 transition runs");
>+        }, "Verify CSS variable value before transition");
>+
>+    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 transition runs");
>+        }, "Verify substituted color value before transition");
>+
>+    var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
>+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
>+        }));
>+
>+    var afterAnimationColorTest = async_test("Verify substituted color value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(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 transition runs")
>+        }));
>+
>+    // Trigger transition
>+    document.getElementById("target").className = "changed";
>+
>+    // Force another layout pass
>+    document.documentElement.offsetHeight;
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..75f6f143017ae84410d8a995b8d1ae0a2deecc75
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value-expected.txt
>@@ -0,0 +1,9 @@
>+This text should transition from blue to green over a period of 1 second.
>+
>+Harness Error (TIMEOUT), message = null
>+
>+PASS Verify CSS variable value before transition 
>+PASS Verify substituted color value before transition 
>+NOTRUN Verify CSS variable value after transition 
>+NOTRUN Verify substituted color value after transition 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c2548c854c8bc35220ec81bddccad1b8b16072b8
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html
>@@ -0,0 +1,71 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Transitions - Variable value specified before transition; variable specified by name</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>
>+        #target
>+        {
>+            transition-property: --value;
>+            transition-duration: 1s;
>+        }
>+        #target
>+        {
>+            --value: blue;
>+            color: var(--value);
>+        }
>+        #target.changed
>+        {
>+            --value: green;
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target">This text should transition 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 transition runs");
>+        }, "Verify CSS variable value before transition");
>+
>+    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 transition runs");
>+        }, "Verify substituted color value before transition");
>+
>+    var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
>+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
>+        }));
>+
>+    var afterAnimationColorTest = async_test("Verify substituted color value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(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 transition runs")
>+        }));
>+
>+    // Trigger transition
>+    document.getElementById("target").className = "changed";
>+
>+    // Force another layout pass
>+    document.documentElement.offsetHeight;
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..ceac0868f46187da1633305db2f92b99d82eb52c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all-expected.txt
>@@ -0,0 +1,7 @@
>+This text should transition from blue to green over a period of 1 second.
>+
>+PASS Verify CSS variable value before transition 
>+PASS Verify substituted color value before transition 
>+PASS Verify CSS variable value after transition 
>+PASS Verify substituted color value after transition 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..49642e0fa7188068a01598634695cd28761bec07
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all.html
>@@ -0,0 +1,71 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Transitions - Variable value specified before transition; 'all' keyword used</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>
>+        #target
>+        {
>+            --value: blue;
>+            color: var(--value);
>+        }
>+        #target
>+        {
>+            transition-property: all;
>+            transition-duration: 1s;
>+        }
>+        #target.changed
>+        {
>+            --value: green;
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target">This text should transition 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 transition runs");
>+        }, "Verify CSS variable value before transition");
>+
>+    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 transition runs");
>+        }, "Verify substituted color value before transition");
>+
>+    var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
>+        assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
>+        }));
>+
>+    var afterAnimationColorTest = async_test("Verify substituted color value after transition");
>+    document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(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 transition runs")
>+        }));
>+
>+    // Trigger transition
>+    document.getElementById("target").className = "changed";
>+
>+    // Force another layout pass
>+    document.documentElement.offsetHeight;
>+</script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..75f6f143017ae84410d8a995b8d1ae0a2deecc75
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable-expected.txt
>@@ -0,0 +1,9 @@
>+This text should transition from blue to green over a period of 1 second.
>+
>+Harness Error (TIMEOUT), message = null
>+
>+PASS Verify CSS variable value before transition 
>+PASS Verify substituted color value before transition 
>+NOTRUN Verify CSS variable value after transition 
>+NOTRUN Verify substituted color value after transition 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..a8b5ae4ca0c10c44b9dd70d27a7aed2947acc57c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html
>@@ -0,0 +1,66 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables - Transitions - Variable value specified before transition; variable specified by name</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>
>+        #target
>+        {
>+            --value: blue;
>+            color: var(--value);
>+        }
>+        #target
>+        {
>+            transition-property: --value;
>+            transition-duration: 1s;
>+        }
>+        #target.changed
>+        {
>+            --value: green;
>+        }
>+    </style>
>+</head>
>+<body>
>+
>+    <div id="target">This text should transition 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 transition runs");
>+            }, "Verify CSS variable value before transition");
>+
>+        test(function() {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before transition runs");
>+            }, "Verify substituted color value before transition");
>+
>+        var afterAnimationVariableTest = async_test("Verify CSS variable value after transition");
>+        document.getElementById("target").addEventListener("transitionend", afterAnimationVariableTest.step_func_done(function() {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after transition runs")
>+            }));
>+
>+        var afterAnimationColorTest = async_test("Verify substituted color value after transition");
>+        document.getElementById("target").addEventListener("transitionend", afterAnimationColorTest.step_func_done(function() {
>+            assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after transition runs")
>+            }));
>+
>+        // Trigger transition
>+        document.getElementById("target").className = "changed";
>+
>+        // Force another layout pass
>+        document.documentElement.offsetHeight;
>+    </script>
>+
>+</body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..89ef2851ea12667ed19d43a6de3afc16111daeca
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001-expected.html
>@@ -0,0 +1,21 @@
>+<!DOCTYPE html>
>+<title>CSS Variables 1: Test variables in background shorthand.</title>
>+<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
>+<style>
>+div {
>+	width: 50px;
>+	height: 50px;
>+	padding: 50px;
>+	margin: 10px;
>+	display: inline-block;
>+	background: green;
>+}
>+</style>
>+<p>Test passes if you see four green squares, and no red.</p>
>+<div id="d1"></div>
>+<div id="d2"></div>
>+<div id="d3"></div>
>+<div id="d4"></div>
>+
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..0865f476e4b77ed33c2c7b91c8bd98feca9dede6
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001.html
>@@ -0,0 +1,43 @@
>+<!DOCTYPE html>
>+<title>CSS Variables 1: Test variables in background shorthand.</title>
>+<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
>+<link rel="help" href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
>+<link rel="match" href="reference/vars-background-shorthand-001-ref.html">
>+<style>
>+div {
>+	width: 50px;
>+	height: 50px;
>+	padding: 50px;
>+	margin: 10px;
>+	display: inline-block;
>+	background: red;
>+}
>+
>+div#d1 {
>+	--foo: green;
>+	background: var(--foo);
>+}
>+
>+div#d2 {
>+	--foo: green, green;
>+	background: linear-gradient(var(--foo));
>+}
>+
>+div#d3 {
>+	--foo: linear-gradient(green, green);
>+	background: var(--foo);
>+}
>+
>+div#d4 {
>+	--foo: center / 0 0;
>+	background: green linear-gradient(red, red) var(--foo, );
>+}
>+</style>
>+<p>Test passes if you see four green squares, and no red.</p>
>+<div id="d1"></div>
>+<div id="d2"></div>
>+<div id="d3"></div>
>+<div id="d4"></div>
>+
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize-expected.txt
>new file mode 100644
>index 0000000000000000000000000000000000000000..dce8b9db58d403847a0ca8e91f9f5e8ffb837684
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize-expected.txt
>@@ -0,0 +1,5 @@
>+
>+PASS border-color should serialize to the empty string when border references a variable 
>+PASS border-style should serialize to the empty string when border references a variable 
>+PASS border-width should serialize to the empty string when border references a variable 
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..07b78e58503ea42ffab1270a668fea08a9e7f8fd
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize.html
>@@ -0,0 +1,29 @@
>+<!DOCTYPE html>
>+<html>
>+<head>
>+    <title>CSS Variables Test: Set border shorthand and serialize border-*</title>
>+  <link rel="author" title="Kevin Babbitt" href="kbabbitt@microsoft.com">
>+  <link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
>+  <meta name="assert" content="Pending-substitution values must be serialized as the empty string, if an API allows them to be observed.">
>+  <script src="/resources/testharness.js"></script>
>+  <script src="/resources/testharnessreport.js"></script>
>+</head>
>+<body>
>+    <div id="test" style="border: var(--border)"></div>
>+
>+    <script type="text/javascript">
>+        "use strict";
>+
>+        test(function() {
>+            assert_equals(document.getElementById("test").style.getPropertyValue("border-color"), "");
>+        }, "border-color should serialize to the empty string when border references a variable");
>+        test(function() {
>+            assert_equals(document.getElementById("test").style.getPropertyValue("border-style"), "");
>+        }, "border-style should serialize to the empty string when border references a variable");
>+        test(function() {
>+            assert_equals(document.getElementById("test").style.getPropertyValue("border-width"), "");
>+        }, "border-width should serialize to the empty string when border references a variable");
>+    </script>
>+</body>
>+</html>
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..febe23ed127dd69938dcee9ee6dfac6454161fc2
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001-expected.html
>@@ -0,0 +1,29 @@
>+<!DOCTYPE html>
>+<title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title>
>+<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
>+<style>
>+ 
>+
>+
>+div {
>+	width: 150px;
>+	height: 150px;
>+	margin: 10px;
>+	display: inline-block;
>+	vertical-align: middle;
>+	background: green;
>+	text-align: center;
>+	color: green;
>+	overflow: hidden;
>+}
>+
>+</style>
>+<p>Test passes if you see six green squares, and no red.</p>
>+<div id="d1">X</div>
>+<div id="d2">X</div>
>+<div id="d3">X</div>
>+<div id="d4">X</div>
>+<div id="d5">X</div>
>+<div id="d6">X</div>
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..3c280547fb353a959bc6df95ad690445835ded98
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001.html
>@@ -0,0 +1,63 @@
>+<!DOCTYPE html>
>+<title>CSS Variables 1: Test variables in @font-face, font-family, font shorthand.</title>
>+<link rel="author" title="Lea Verou" href="mailto:lea@verou.me">
>+<link rel="help" href="https://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
>+<link rel="match" href="reference/vars-font-shorthand-001-ref.html">
>+<meta name="flags" content="ahem">
>+<style>
>+
>+div {
>+	width: 150px;
>+	height: 150px;
>+	margin: 10px;
>+	display: inline-block;
>+	vertical-align: middle;
>+	background: red;
>+	text-align: center;
>+	color: green;
>+	overflow: hidden;
>+}
>+
>+div#d1 {
>+	--foo: Ahem;
>+	font-family: var(--foo);
>+	font-size: 150px;
>+	line-height: 1;
>+}
>+
>+div#d2 {
>+	--foo: 0 Ahem;
>+	font: var(--foo);
>+	font-size: 150px;
>+	line-height: 150px;
>+}
>+
>+div#d3 {
>+	--foo: Ahem, sans-serif;
>+	font: 150px/1 var(--foo);
>+}
>+
>+div#d4 {
>+	--foo: Ahem;
>+	font: 150px/1 var(--foo), sans-serif;
>+}
>+
>+div#d5 {
>+	--foo: 1 Ahem;
>+	font: 150px/var(--foo);
>+}
>+
>+div#d6 {
>+	--foo: 150px/1 Ahem;
>+	font: var(--foo);
>+}
>+</style>
>+<p>Test passes if you see six green squares, and no red.</p>
>+<div id="d1">X</div>
>+<div id="d2">X</div>
>+<div id="d3">X</div>
>+<div id="d4">X</div>
>+<div id="d5">X</div>
>+<div id="d6">X</div>
>+
>+
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/w3c-import.log
>new file mode 100644
>index 0000000000000000000000000000000000000000..16bf4070ccf4769e9dd2ce7b586dfa9f598b826c
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/w3c-import.log
>@@ -0,0 +1,73 @@
>+The tests in this directory were imported from the W3C repository.
>+Do NOT modify these tests directly in WebKit.
>+Instead, create a pull request on the WPT github:
>+	https://github.com/web-platform-tests/wpt
>+
>+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
>+
>+Do NOT modify or remove this file.
>+
>+------------------------------------------------------------------------
>+Properties requiring vendor prefixes:
>+None
>+Property values requiring vendor prefixes:
>+None
>+------------------------------------------------------------------------
>+List of files:
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/META.yml
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-case-sensitive-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/css-vars-custom-property-inheritance.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/test_variable_legal_values.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-shorthand.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe-transform.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-into-keyframe.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-fallback.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe-multiple.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-substitute-within-keyframe.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-to-only.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-document.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-created-element.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-cssText.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-border-shorthand-serialize.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-cascading.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition-keywords.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-definition.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-exponential-blowup.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-letter.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-first-line.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-generated-content-dynamic-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-invalidation.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-pseudo-element.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-cssom.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-refresh.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands-cssom.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-variable.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-without-whitespace.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-background-properties.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-basic.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-filters.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-plus-box-shadow.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-replaced-size.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shadow-properties.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-shorthands.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-substitution-variable-declaration.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-from-no-value.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-to-no-value.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-all-before-value.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-transition-property-variable-before-value.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-all.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-transitions-value-before-transition-property-variable.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-background-shorthand-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-border-shorthand-serialize.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/vars-font-shorthand-001.html

Flags:

koivisto: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 192828: 357609 | 357629 | 357635 | 357655 | 357775 | 357787 | 357791 | 357792 | 357794 | 357797 | 357920 | 357977