[css-properties-values-api] Reify specified values as CSSUnparsedValue

According to a recent spec change, the syntax of a registered custom
property must be ignored until computed-value time. This means that
we can unfortunately not reify specified values according to the
syntax; instead all custom properties reify as CSSUnparsedValue,
regardless of their registration status.

This means that we can remove large parts of the Typed OM code which
deals with PropertyRegistation for specified values and matching of
incoming CSSStyleValues against registered syntax.

The typedom.html test was also mostly re-written, as most of the things
it tested are now not relevant anymore, or at least no longer as
interesting as before. (The new reworked test basically verifies that
registered custom properties behave as unregistered for
attributeStyleMap and styleMap. For computedStyleMap, we should of
course still reify according to the syntax).

Bug: 641877

Change-Id: I4da7c25b8f066dd01388b6229bebe181513e9fd9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1713557
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680595}

third_party/blink/renderer/build/scripts/core/css/templates/cssom_types.cc.tmpl

@@ -14,7 +14,6 @@
 #include "third_party/blink/renderer/core/css/cssom/css_unsupported_style_value.h"
 #include "third_party/blink/renderer/core/css/cssom/cssom_keywords.h"
 #include "third_party/blink/renderer/core/css/properties/css_property.h"
-#include "third_party/blink/renderer/core/css/property_registration.h"
 
 namespace blink {
 
@@ -93,27 +92,18 @@ bool CSSOMTypes::IsPropertySupported(CSSPropertyID id) {
 
 bool CSSOMTypes::PropertyCanTake(CSSPropertyID id,
                                  const AtomicString& custom_property_name,
-                                 const PropertyRegistration* registration,
-                                 const CSSStyleValue& value,
-                                 const CSSSyntaxComponent*& match) {
+                                 const CSSStyleValue& value) {
   DCHECK_EQ(id == CSSPropertyID::kVariable, !custom_property_name.IsNull());
 
-  if (id == CSSPropertyID::kVariable && registration) {
-    if (auto* unsupported_style_value =
-            DynamicTo<CSSUnsupportedStyleValue>(value)) {
-      return unsupported_style_value->IsValidFor(
-          CSSPropertyName(custom_property_name));
-    }
-    match = registration->Syntax().Match(value);
-    return match != nullptr;
-  }
-
   if (auto* css_keyword_value = DynamicTo<CSSKeywordValue>(value)) {
     return CSSOMKeywords::ValidKeywordForProperty(id, *css_keyword_value);
   }
   if (auto* unsupported_style_value =
           DynamicTo<CSSUnsupportedStyleValue>(value)) {
-    return unsupported_style_value->IsValidFor(CSSPropertyName(id));
+    auto name = (id == CSSPropertyID::kVariable)
+                    ? CSSPropertyName(custom_property_name)
+                    : CSSPropertyName(id);
+    return unsupported_style_value->IsValidFor(name);
   }
   if (value.GetType() == CSSStyleValue::kUnparsedType) {
     return true;

third_party/blink/renderer/core/css/BUILD.gn

@@ -181,7 +181,6 @@ blink_core_sources("css") {
     "css_style_sheet.h",
     "css_supports_rule.cc",
     "css_supports_rule.h",
-    "css_syntax_component.cc",
     "css_syntax_component.h",
     "css_syntax_descriptor.cc",
     "css_syntax_descriptor.h",

third_party/blink/renderer/core/css/css_syntax_component.cc

-// Copyright 2018 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-#include "third_party/blink/renderer/core/css/css_syntax_component.h"
-
-#include "third_party/blink/renderer/core/css/cssom/css_keyword_value.h"
-#include "third_party/blink/renderer/core/css/cssom/css_style_value.h"
-#include "third_party/blink/renderer/core/css/cssom/cssom_types.h"
-
-namespace blink {
-
-bool CSSSyntaxComponent::CanTake(const CSSStyleValue& value) const {
-  switch (type_) {
-    case CSSSyntaxType::kTokenStream:
-      return value.GetType() == CSSStyleValue::kUnparsedType;
-    case CSSSyntaxType::kIdent:
-      return value.GetType() == CSSStyleValue::kKeywordType &&
-             static_cast<const CSSKeywordValue&>(value).value() == string_;
-    case CSSSyntaxType::kLength:
-      return CSSOMTypes::IsCSSStyleValueLength(value);
-    case CSSSyntaxType::kInteger:
-      // TODO(andruud): Support rounding.
-      // https://drafts.css-houdini.org/css-typed-om-1/#numeric-objects
-      FALLTHROUGH;
-    case CSSSyntaxType::kNumber:
-      return CSSOMTypes::IsCSSStyleValueNumber(value);
-    case CSSSyntaxType::kPercentage:
-      return CSSOMTypes::IsCSSStyleValuePercentage(value);
-    case CSSSyntaxType::kLengthPercentage:
-      // TODO(andruud): Support calc(X% + Ypx).
-      return CSSOMTypes::IsCSSStyleValueLength(value) ||
-             CSSOMTypes::IsCSSStyleValuePercentage(value);
-    case CSSSyntaxType::kColor:
-      // TODO(andruud): Support custom properties in CSSUnsupportedStyleValue.
-      return false;
-    case CSSSyntaxType::kImage:
-    case CSSSyntaxType::kUrl:
-      return value.GetType() == CSSStyleValue::kURLImageType;
-    case CSSSyntaxType::kAngle:
-      return CSSOMTypes::IsCSSStyleValueAngle(value);
-    case CSSSyntaxType::kTime:
-      return CSSOMTypes::IsCSSStyleValueTime(value);
-    case CSSSyntaxType::kResolution:
-      return CSSOMTypes::IsCSSStyleValueResolution(value);
-    case CSSSyntaxType::kTransformFunction:
-      // TODO(andruud): Currently not supported by Typed OM.
-      // https://github.com/w3c/css-houdini-drafts/issues/290
-      // For now, this should accept a CSSUnsupportedStyleValue, such that
-      // <transform-function> values can be moved from one registered property
-      // to another.
-      // TODO(andruud): Support custom properties in CSSUnsupportedStyleValue.
-      return false;
-    case CSSSyntaxType::kTransformList:
-      return value.GetType() == CSSStyleValue::kTransformType;
-    case CSSSyntaxType::kCustomIdent:
-      return value.GetType() == CSSStyleValue::kKeywordType;
-    default:
-      return false;
-  }
-}
-
-}  // namespace blink

third_party/blink/renderer/core/css/css_syntax_component.h

@@ -12,8 +12,6 @@
 
 namespace blink {
 
-class CSSStyleValue;
-
 enum class CSSSyntaxType {
   kTokenStream,
   kIdent,
@@ -58,8 +56,6 @@ class CSSSyntaxComponent {
     return repeat_ == CSSSyntaxRepeat::kSpaceSeparated ? ' ' : ',';
   }
 
-  bool CanTake(const CSSStyleValue&) const;
-
  private:
   CSSSyntaxType type_;
   String string_;  // Only used when type_ is CSSSyntaxType::kIdent

third_party/blink/renderer/core/css/css_syntax_descriptor.cc

@@ -127,19 +127,6 @@ const CSSValue* ConsumeSyntaxComponent(const CSSSyntaxComponent& syntax,
 
 }  // namespace
 
-const CSSSyntaxComponent* CSSSyntaxDescriptor::Match(
-    const CSSStyleValue& value) const {
-  for (const CSSSyntaxComponent& component : syntax_components_) {
-    if (component.CanTake(value))
-      return &component;
-  }
-  return nullptr;
-}
-
-bool CSSSyntaxDescriptor::CanTake(const CSSStyleValue& value) const {
-  return Match(value);
-}
-
 const CSSValue* CSSSyntaxDescriptor::Parse(CSSParserTokenRange range,
                                            const CSSParserContext* context,
                                            bool is_animation_tainted) const {

third_party/blink/renderer/core/css/css_syntax_descriptor.h

@@ -19,8 +19,6 @@ class CORE_EXPORT CSSSyntaxDescriptor {
   const CSSValue* Parse(CSSParserTokenRange,
                         const CSSParserContext*,
                         bool is_animation_tainted) const;
-  const CSSSyntaxComponent* Match(const CSSStyleValue&) const;
-  bool CanTake(const CSSStyleValue&) const;
   bool IsTokenStream() const {
     return syntax_components_.size() == 1 &&
            syntax_components_[0].GetType() == CSSSyntaxType::kTokenStream;

third_party/blink/renderer/core/css/cssom/css_style_value.cc

@@ -9,7 +9,6 @@
 #include "third_party/blink/renderer/core/css/cssom/style_value_factory.h"
 #include "third_party/blink/renderer/core/css/parser/css_parser_context.h"
 #include "third_party/blink/renderer/core/css/properties/css_property.h"
-#include "third_party/blink/renderer/core/css/property_registration.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 #include "third_party/blink/renderer/platform/bindings/exception_state.h"
 #include "third_party/blink/renderer/platform/heap/heap.h"
@@ -35,14 +34,8 @@ CSSStyleValueVector ParseCSSStyleValue(
   AtomicString custom_property_name = property_id == CSSPropertyID::kVariable
                                           ? AtomicString(property_name)
                                           : g_null_atom;
-
-  const PropertyRegistration* registration =
-      (property_id == CSSPropertyID::kVariable)
-          ? PropertyRegistration::From(execution_context, custom_property_name)
-          : nullptr;
-
   const auto style_values = StyleValueFactory::FromString(
-      property_id, custom_property_name, registration, value,
+      property_id, custom_property_name, value,
       MakeGarbageCollected<CSSParserContext>(*execution_context));
   if (style_values.IsEmpty()) {
     exception_state.ThrowTypeError("The value provided ('" + value +

third_party/blink/renderer/core/css/cssom/css_style_value.h

@@ -15,7 +15,6 @@
 
 namespace blink {
 
-class CSSSyntaxComponent;
 class ExceptionState;
 class ExecutionContext;
 enum class SecureContextMode;
@@ -66,9 +65,7 @@ class CORE_EXPORT CSSStyleValue : public ScriptWrappable {
 
   virtual const CSSValue* ToCSSValue() const = 0;
   // FIXME: We should make this a method on CSSProperty instead.
-  virtual const CSSValue* ToCSSValueWithProperty(
-      CSSPropertyID,
-      const CSSSyntaxComponent*) const {
+  virtual const CSSValue* ToCSSValueWithProperty(CSSPropertyID) const {
     return ToCSSValue();
   }
   virtual String toString() const;

third_party/blink/renderer/core/css/cssom/css_unit_value.cc

@@ -40,8 +40,7 @@ CSSPrimitiveValue::UnitType ToCanonicalUnitIfPossible(
 
 bool IsValueOutOfRangeForProperty(CSSPropertyID property_id,
                                   double value,
-                                  CSSPrimitiveValue::UnitType unit,
-                                  const CSSSyntaxComponent* match) {
+                                  CSSPrimitiveValue::UnitType unit) {
   // FIXME: Avoid this CSSProperty::Get call as it can be costly.
   // The caller often has a CSSProperty already, so we can just pass it here.
   if (LengthPropertyFunctions::GetValueRange(CSSProperty::Get(property_id)) ==
@@ -51,10 +50,6 @@ bool IsValueOutOfRangeForProperty(CSSPropertyID property_id,
 
   // For non-length properties and special cases.
   switch (property_id) {
-    case CSSPropertyID::kVariable:
-      if (match && match->IsInteger())
-        return round(value) != value;
-      return false;
     case CSSPropertyID::kOrder:
     case CSSPropertyID::kZIndex:
       return round(value) != value;
@@ -175,9 +170,8 @@ const CSSNumericLiteralValue* CSSUnitValue::ToCSSValue() const {
 }
 
 const CSSPrimitiveValue* CSSUnitValue::ToCSSValueWithProperty(
-    CSSPropertyID property_id,
-    const CSSSyntaxComponent* match) const {
-  if (IsValueOutOfRangeForProperty(property_id, value_, unit_, match)) {
+    CSSPropertyID property_id) const {
+  if (IsValueOutOfRangeForProperty(property_id, value_, unit_)) {
     // Wrap out of range values with a calc.
     CSSMathExpressionNode* node = ToCalcExpressionNode();
     node->SetIsNestedCalc();

third_party/blink/renderer/core/css/cssom/css_unit_value.h

@@ -52,9 +52,7 @@ class CORE_EXPORT CSSUnitValue final : public CSSNumericValue {
   // From CSSStyleValue.
   StyleValueType GetType() const final;
   const CSSNumericLiteralValue* ToCSSValue() const final;
-  const CSSPrimitiveValue* ToCSSValueWithProperty(
-      CSSPropertyID,
-      const CSSSyntaxComponent*) const final;
+  const CSSPrimitiveValue* ToCSSValueWithProperty(CSSPropertyID) const final;
   CSSMathExpressionNode* ToCalcExpressionNode() const final;
 
  private:

third_party/blink/renderer/core/css/cssom/cssom_types.h

@@ -11,8 +11,6 @@
 
 namespace blink {
 
-class PropertyRegistration;
-
 // This class provides utility functions for determining whether a property
 // can accept a CSSStyleValue type or instance. Its implementation is generated
 // using input from css_properties.json5 and the script
@@ -33,15 +31,9 @@ class CSSOMTypes {
   static bool IsCSSStyleValuePosition(const CSSStyleValue&);
 
   static bool IsPropertySupported(CSSPropertyID);
-  // For registered custom properties, if the CSSStyleValue is accepted
-  // because it matches the registered grammar (and not because it is
-  // a CSSUnsupportedStyleValue with matching name), 'match' will be set
-  // to the component that was matched.
   static bool PropertyCanTake(CSSPropertyID,
                               const AtomicString& custom_property_name,
-                              const PropertyRegistration*,
-                              const CSSStyleValue&,
-                              const CSSSyntaxComponent*& match);
+                              const CSSStyleValue&);
 };
 
 }  // namespace blink

third_party/blink/renderer/core/css/cssom/style_property_map.cc

@@ -15,7 +15,6 @@
 #include "third_party/blink/renderer/core/css/parser/css_parser_context.h"
 #include "third_party/blink/renderer/core/css/parser/css_tokenizer.h"
 #include "third_party/blink/renderer/core/css/properties/css_property.h"
-#include "third_party/blink/renderer/core/css/property_registry.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 #include "third_party/blink/renderer/platform/bindings/exception_state.h"
 #include "third_party/blink/renderer/platform/heap/heap.h"
@@ -24,21 +23,6 @@ namespace blink {
 
 namespace {
 
-bool IsListValuedProperty(const CSSProperty& property,
-                          const PropertyRegistration* registration) {
-  if (property.IsRepeated())
-    return true;
-  // TODO(andruud): The concept of "list-valued properties" doesn't fully work
-  // in all cases. See https://github.com/w3c/css-houdini-drafts/issues/823
-  // For now we only consider a custom property list-valued if it has a single
-  // syntax component that is repeatable (e.g. <length>+).
-  if (property.IDEquals(CSSPropertyID::kVariable) && registration) {
-    const auto& components = registration->Syntax().Components();
-    return components.size() == 1 && components[0].IsRepeatable();
-  }
-  return false;
-}
-
 CSSValueList* CssValueListForPropertyID(CSSPropertyID property_id) {
   DCHECK(CSSProperty::Get(property_id).IsRepeated());
   char separator = CSSProperty::Get(property_id).RepetitionSeparator();
@@ -55,79 +39,21 @@ CSSValueList* CssValueListForPropertyID(CSSPropertyID property_id) {
   }
 }
 
-String StyleValueToString(const CSSProperty& property,
-                          const CSSStyleValue& style_value,
-                          const CSSSyntaxComponent* syntax_component) {
-  if (style_value.GetType() == CSSStyleValue::kUnknownType)
-    return style_value.toString();
-  return style_value
-      .ToCSSValueWithProperty(property.PropertyID(), syntax_component)
-      ->CssText();
-}
-
-const CSSVariableReferenceValue* CreateVariableReferenceValue(
-    const String& value,
-    const CSSParserContext& context) {
-  CSSTokenizer tokenizer(value);
-  const auto tokens = tokenizer.TokenizeToEOF();
-  CSSParserTokenRange range(tokens);
-  scoped_refptr<CSSVariableData> variable_data = CSSVariableData::Create(
-      range, false, false, context.BaseURL(), context.Charset());
-  return MakeGarbageCollected<CSSVariableReferenceValue>(variable_data,
-                                                         context);
-}
-
-const CSSVariableReferenceValue* CreateVariableReferenceValue(
-    const CSSProperty& property,
-    const AtomicString& custom_property_name,
-    const PropertyRegistration& registration,
-    const CSSStyleValueVector& values,
-    const CSSParserContext& context) {
-  DCHECK(IsListValuedProperty(property, &registration));
-  DCHECK_EQ(registration.Syntax().Components().size(), 1U);
-
-  char separator = registration.Syntax().Components()[0].Separator();
-
-  StringBuilder builder;
-
-  for (const auto& value : values) {
-    const CSSSyntaxComponent* syntax_component = nullptr;
-
-    if (!CSSOMTypes::PropertyCanTake(property.PropertyID(),
-                                     custom_property_name, &registration,
-                                     *value, syntax_component)) {
-      return nullptr;
-    }
-    if (!builder.IsEmpty())
-      builder.Append(separator);
-    builder.Append(StyleValueToString(property, *value, syntax_component));
-  }
-
-  return CreateVariableReferenceValue(builder.ToString(), context);
-}
-
 const CSSValue* StyleValueToCSSValue(
     const CSSProperty& property,
     const AtomicString& custom_property_name,
-    const PropertyRegistration* registration,
     const CSSStyleValue& style_value,
     const ExecutionContext& execution_context) {
   DCHECK_EQ(property.IDEquals(CSSPropertyID::kVariable),
             !custom_property_name.IsNull());
 
-  const CSSSyntaxComponent* syntax_component = nullptr;
-
   const CSSPropertyID property_id = property.PropertyID();
   if (!CSSOMTypes::PropertyCanTake(property_id, custom_property_name,
-                                   registration, style_value,
-                                   syntax_component)) {
+                                   style_value)) {
     return nullptr;
   }
 
-  if (style_value.GetType() == CSSStyleValue::kUnknownType &&
-      // Registered custom properties must enter the CSSPropertyID::kVariable
-      // switch-case below, for proper parsing according to registered syntax.
-      !(property_id == CSSPropertyID::kVariable && registration)) {
+  if (style_value.GetType() == CSSStyleValue::kUnknownType) {
     return CSSParser::ParseSingleValue(
         property.PropertyID(), style_value.toString(),
         MakeGarbageCollected<CSSParserContext>(execution_context));
@@ -137,16 +63,6 @@ const CSSValue* StyleValueToCSSValue(
   // TODO(https://crbug.com/545324): Move this into a method on
   // CSSProperty when there are more of these cases.
   switch (property_id) {
-    case CSSPropertyID::kVariable:
-      if (registration &&
-          style_value.GetType() != CSSStyleValue::kUnparsedType) {
-        auto* context =
-            MakeGarbageCollected<CSSParserContext>(execution_context);
-        String string =
-            StyleValueToString(property, style_value, syntax_component);
-        return CreateVariableReferenceValue(string, *context);
-      }
-      break;
     case CSSPropertyID::kBorderBottomLeftRadius:
     case CSSPropertyID::kBorderBottomRightRadius:
     case CSSPropertyID::kBorderTopLeftRadius:
@@ -269,16 +185,15 @@ const CSSValue* StyleValueToCSSValue(
       break;
   }
 
-  return style_value.ToCSSValueWithProperty(property_id, syntax_component);
+  return style_value.ToCSSValueWithProperty(property_id);
 }
 
 const CSSValue* CoerceStyleValueOrString(
     const CSSProperty& property,
     const AtomicString& custom_property_name,
-    const PropertyRegistration* registration,
     const CSSStyleValueOrString& value,
     const ExecutionContext& execution_context) {
-  DCHECK(!IsListValuedProperty(property, registration));
+  DCHECK(!property.IsRepeated());
   DCHECK_EQ(property.IDEquals(CSSPropertyID::kVariable),
             !custom_property_name.IsNull());
 
@@ -286,29 +201,27 @@ const CSSValue* CoerceStyleValueOrString(
     if (!value.GetAsCSSStyleValue())
       return nullptr;
 
-    return StyleValueToCSSValue(property, custom_property_name, registration,
+    return StyleValueToCSSValue(property, custom_property_name,
                                 *value.GetAsCSSStyleValue(), execution_context);
   } else {
     DCHECK(value.IsString());
     const auto values = StyleValueFactory::FromString(
-        property.PropertyID(), custom_property_name, registration,
-        value.GetAsString(),
+        property.PropertyID(), custom_property_name, value.GetAsString(),
         MakeGarbageCollected<CSSParserContext>(execution_context));
     if (values.size() != 1U)
       return nullptr;
 
-    return StyleValueToCSSValue(property, custom_property_name, registration,
-                                *values[0], execution_context);
+    return StyleValueToCSSValue(property, custom_property_name, *values[0],
+                                execution_context);
   }
 }
 
 const CSSValue* CoerceStyleValuesOrStrings(
     const CSSProperty& property,
     const AtomicString& custom_property_name,
-    const PropertyRegistration* registration,
     const HeapVector<CSSStyleValueOrString>& values,
     const ExecutionContext& execution_context) {
-  DCHECK(IsListValuedProperty(property, registration));
+  DCHECK(property.IsRepeated());
   DCHECK_EQ(property.IDEquals(CSSPropertyID::kVariable),
             !custom_property_name.IsNull());
   if (values.IsEmpty())
@@ -316,23 +229,15 @@ const CSSValue* CoerceStyleValuesOrStrings(
 
   CSSStyleValueVector style_values =
       StyleValueFactory::CoerceStyleValuesOrStrings(
-          property, custom_property_name, registration, values,
-          execution_context);
+          property, custom_property_name, values, execution_context);
 
   if (style_values.IsEmpty())
     return nullptr;
 
-  if (property.IDEquals(CSSPropertyID::kVariable) && registration) {
-    auto* context = MakeGarbageCollected<CSSParserContext>(execution_context);
-    return CreateVariableReferenceValue(property, custom_property_name,
-                                        *registration, style_values, *context);
-  }
-
   CSSValueList* result = CssValueListForPropertyID(property.PropertyID());
   for (const auto& style_value : style_values) {
-    const CSSValue* css_value =
-        StyleValueToCSSValue(property, custom_property_name, nullptr,
-                             *style_value, execution_context);
+    const CSSValue* css_value = StyleValueToCSSValue(
+        property, custom_property_name, *style_value, execution_context);
     if (!css_value)
       return nullptr;
     if (css_value->IsCSSWideKeyword() || css_value->IsVariableReferenceValue())
@@ -366,10 +271,8 @@ void StylePropertyMap::set(const ExecutionContext* execution_context,
     String css_text;
     if (values[0].IsCSSStyleValue()) {
       CSSStyleValue* style_value = values[0].GetAsCSSStyleValue();
-      const CSSSyntaxComponent* syntax_component = nullptr;
       if (style_value &&
-          CSSOMTypes::PropertyCanTake(property_id, g_null_atom, nullptr,
-                                      *style_value, syntax_component)) {
+          CSSOMTypes::PropertyCanTake(property_id, g_null_atom, *style_value)) {
         css_text = style_value->toString();
       }
     } else {
@@ -388,26 +291,13 @@ void StylePropertyMap::set(const ExecutionContext* execution_context,
                                           ? AtomicString(property_name)
                                           : g_null_atom;
 
-  const PropertyRegistration* registration = nullptr;
-
-  if (property_id == CSSPropertyID::kVariable &&
-      IsA<Document>(execution_context)) {
-    const PropertyRegistry* registry =
-        To<Document>(*execution_context).GetPropertyRegistry();
-    if (registry) {
-      registration = registry->Registration(custom_property_name);
-    }
-  }
-
   const CSSValue* result = nullptr;
-  if (IsListValuedProperty(property, registration)) {
-    result =
-        CoerceStyleValuesOrStrings(property, custom_property_name, registration,
-                                   values, *execution_context);
+  if (property.IsRepeated()) {
+    result = CoerceStyleValuesOrStrings(property, custom_property_name, values,
+                                        *execution_context);
   } else if (values.size() == 1U) {
-    result =
-        CoerceStyleValueOrString(property, custom_property_name, registration,
-                                 values[0], *execution_context);
+    result = CoerceStyleValueOrString(property, custom_property_name, values[0],
+                                      *execution_context);
   }
 
   if (!result) {
@@ -438,47 +328,6 @@ void StylePropertyMap::append(const ExecutionContext* execution_context,
   const CSSProperty& property = CSSProperty::Get(property_id);
 
   if (property_id == CSSPropertyID::kVariable) {
-    AtomicString custom_property_name(property_name);
-
-    const PropertyRegistration* registration =
-        PropertyRegistration::From(execution_context, custom_property_name);
-
-    if (registration && IsListValuedProperty(property, registration)) {
-      CSSStyleValueVector style_values;
-
-      // Add existing CSSStyleValues:
-      if (const CSSValue* css_value =
-              GetCustomProperty(*execution_context, custom_property_name)) {
-        DCHECK(css_value->IsValueList());
-        style_values = StyleValueFactory::CssValueToStyleValueVector(
-            CSSPropertyName(custom_property_name), *css_value);
-      }
-
-      // Append incoming CSSStyleValues:
-      CSSStyleValueVector incoming_style_values =
-          StyleValueFactory::CoerceStyleValuesOrStrings(
-              property, custom_property_name, registration, values,
-              *execution_context);
-
-      const CSSValue* result = nullptr;
-
-      if (!incoming_style_values.IsEmpty()) {
-        style_values.AppendVector(incoming_style_values);
-        auto* context =
-            MakeGarbageCollected<CSSParserContext>(*execution_context);
-        result =
-            CreateVariableReferenceValue(property, custom_property_name,
-                                         *registration, style_values, *context);
-      }
-
-      if (!result) {
-        exception_state.ThrowTypeError("Invalid type for property");
-        return;
-      }
-
-      SetCustomProperty(custom_property_name, *result);
-      return;
-    }
     exception_state.ThrowTypeError(
         "Appending to custom properties is not supported");
     return;
@@ -497,7 +346,7 @@ void StylePropertyMap::append(const ExecutionContext* execution_context,
   }
 
   const CSSValue* result = CoerceStyleValuesOrStrings(
-      property, g_null_atom, nullptr, values, *execution_context);
+      property, g_null_atom, values, *execution_context);
   const auto* result_value_list = DynamicTo<CSSValueList>(result);
   if (!result_value_list) {
     exception_state.ThrowTypeError("Invalid type for property");

third_party/blink/renderer/core/css/cssom/style_property_map_read_only_main_thread.cc

@@ -73,9 +73,8 @@ CSSStyleValue* StylePropertyMapReadOnlyMainThread::get(
   if (property.IsShorthand())
     return GetShorthandProperty(property);
 
-  const CSSValue* value =
-      (name->IsCustomProperty())
-          ? GetCustomProperty(*execution_context, name->ToAtomicString())
+  const CSSValue* value = (name->IsCustomProperty())
+                              ? GetCustomProperty(name->ToAtomicString())
                               : GetProperty(name->Id());
   if (!value)
     return nullptr;
@@ -110,9 +109,8 @@ CSSStyleValueVector StylePropertyMapReadOnlyMainThread::getAll(
     return values;
   }
 
-  const CSSValue* value =
-      (name->IsCustomProperty())
-          ? GetCustomProperty(*execution_context, name->ToAtomicString())
+  const CSSValue* value = (name->IsCustomProperty())
+                              ? GetCustomProperty(name->ToAtomicString())
                               : GetProperty(name->Id());
   if (!value)
     return CSSStyleValueVector();
@@ -127,41 +125,14 @@ bool StylePropertyMapReadOnlyMainThread::has(
   return !getAll(execution_context, property_name, exception_state).IsEmpty();
 }
 
-const CSSValue* StylePropertyMapReadOnlyMainThread::GetCustomProperty(
-    const ExecutionContext& execution_context,
-    const AtomicString& property_name) const {
-  const CSSValue* value = GetCustomProperty(property_name);
-
-  const auto* document = DynamicTo<Document>(execution_context);
-  if (!document)
-    return value;
-
-  return PropertyRegistry::ParseIfRegistered(*document, property_name, value);
-}
-
 StylePropertyMapReadOnlyMainThread::IterationSource*
 StylePropertyMapReadOnlyMainThread::StartIteration(ScriptState* script_state,
                                                    ExceptionState&) {
   HeapVector<StylePropertyMapReadOnlyMainThread::StylePropertyMapEntry> result;
 
-  const ExecutionContext& execution_context =
-      *ExecutionContext::From(script_state);
-
-  ForEachProperty([&result, &execution_context](const CSSPropertyName& name,
-                                                const CSSValue& css_value) {
-    const CSSValue* value = &css_value;
-
-    // TODO(andruud): Refactor this. ForEachProperty should yield the correct,
-    // already-parsed value in the first place.
-    if (name.IsCustomProperty()) {
-      const auto* document = DynamicTo<Document>(execution_context);
-      if (document) {
-        value = PropertyRegistry::ParseIfRegistered(
-            *document, name.ToAtomicString(), value);
-      }
-    }
-
-    auto values = StyleValueFactory::CssValueToStyleValueVector(name, *value);
+  ForEachProperty([&result](const CSSPropertyName& name,
+                            const CSSValue& value) {
+    auto values = StyleValueFactory::CssValueToStyleValueVector(name, value);
     result.emplace_back(name.ToAtomicString(), std::move(values));
   });
 

third_party/blink/renderer/core/css/cssom/style_property_map_read_only_main_thread.h

@@ -43,9 +43,6 @@ class CORE_EXPORT StylePropertyMapReadOnlyMainThread
 
   virtual String SerializationForShorthand(const CSSProperty&) const = 0;
 
-  const CSSValue* GetCustomProperty(const ExecutionContext&,
-                                    const AtomicString&) const;
-
  private:
   IterationSource* StartIteration(ScriptState*, ExceptionState&) override;
 

third_party/blink/renderer/core/css/cssom/style_value_factory.cc

@@ -26,7 +26,6 @@
 #include "third_party/blink/renderer/core/css/parser/css_tokenizer.h"
 #include "third_party/blink/renderer/core/css/parser/css_variable_parser.h"
 #include "third_party/blink/renderer/core/css/properties/css_property.h"
-#include "third_party/blink/renderer/core/css/property_registration.h"
 #include "third_party/blink/renderer/core/style_property_shorthand.h"
 #include "third_party/blink/renderer/platform/heap/heap.h"
 
@@ -244,7 +243,6 @@ CSSStyleValueVector UnsupportedCSSValue(const CSSPropertyName& name,
 CSSStyleValueVector StyleValueFactory::FromString(
     CSSPropertyID property_id,
     const AtomicString& custom_property_name,
-    const PropertyRegistration* registration,
     const String& css_text,
     const CSSParserContext* parser_context) {
   DCHECK_NE(property_id, CSSPropertyID::kInvalid);
@@ -277,17 +275,6 @@ CSSStyleValueVector StyleValueFactory::FromString(
     return result;
   }
 
-  if (property_id == CSSPropertyID::kVariable && registration) {
-    const bool is_animation_tainted = false;
-    const CSSValue* value = registration->Syntax().Parse(tokens, parser_context,
-                                                         is_animation_tainted);
-    if (!value)
-      return CSSStyleValueVector();
-
-    return StyleValueFactory::CssValueToStyleValueVector(
-        CSSPropertyName(custom_property_name), *value);
-  }
-
   if ((property_id == CSSPropertyID::kVariable && !tokens.IsEmpty()) ||
       CSSVariableParser::ContainsValidVariableReferences(range)) {
     const auto variable_data = CSSVariableData::Create(
@@ -316,7 +303,6 @@ CSSStyleValue* StyleValueFactory::CssValueToStyleValue(
 CSSStyleValueVector StyleValueFactory::CoerceStyleValuesOrStrings(
     const CSSProperty& property,
     const AtomicString& custom_property_name,
-    const PropertyRegistration* registration,
     const HeapVector<CSSStyleValueOrString>& values,
     const ExecutionContext& execution_context) {
   const CSSParserContext* parser_context = nullptr;
@@ -335,8 +321,8 @@ CSSStyleValueVector StyleValueFactory::CoerceStyleValuesOrStrings(
       }
 
       const auto subvalues = StyleValueFactory::FromString(
-          property.PropertyID(), custom_property_name, registration,
-          value.GetAsString(), parser_context);
+          property.PropertyID(), custom_property_name, value.GetAsString(),
+          parser_context);
       if (subvalues.IsEmpty())
         return CSSStyleValueVector();
 

third_party/blink/renderer/core/css/cssom/style_value_factory.h

@@ -17,7 +17,6 @@ class CSSProperty;
 class CSSPropertyName;
 class CSSValue;
 class ExecutionContext;
-class PropertyRegistration;
 
 class CORE_EXPORT StyleValueFactory {
   STATIC_ONLY(StyleValueFactory);
@@ -26,7 +25,6 @@ class CORE_EXPORT StyleValueFactory {
   static CSSStyleValueVector FromString(
       CSSPropertyID,
       const AtomicString& custom_property_name,
-      const PropertyRegistration*,
       const String&,
       const CSSParserContext*);
   static CSSStyleValue* CssValueToStyleValue(const CSSPropertyName&,
@@ -37,7 +35,6 @@ class CORE_EXPORT StyleValueFactory {
   static CSSStyleValueVector CoerceStyleValuesOrStrings(
       const CSSProperty& property,
       const AtomicString& custom_property_name,
-      const PropertyRegistration*,
       const HeapVector<CSSStyleValueOrString>& values,
       const ExecutionContext&);
   // Reify a CSSStyleValue without the context of a CSS property. For most

third_party/blink/renderer/core/css/property_registry.cc

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 #include "third_party/blink/renderer/core/css/property_registry.h"
-#include "third_party/blink/renderer/core/css/css_custom_property_declaration.h"
 
 namespace blink {
 
@@ -28,37 +27,6 @@ PropertyRegistry::RegistrationMap::const_iterator PropertyRegistry::end()
   return registrations_.end();
 }
 
-const CSSValue* PropertyRegistry::ParseIfRegistered(
-    const Document& document,
-    const AtomicString& property_name,
-    const CSSValue* value) {
-  auto* custom_property_declaration =
-      DynamicTo<CSSCustomPropertyDeclaration>(value);
-  if (!custom_property_declaration)
-    return value;
-
-  const PropertyRegistry* registry = document.GetPropertyRegistry();
-
-  if (!registry)
-    return value;
-
-  const PropertyRegistration* registration =
-      registry->Registration(property_name);
-
-  if (!registration)
-    return value;
-
-  CSSVariableData* tokens = custom_property_declaration->Value();
-
-  if (!tokens || tokens->NeedsVariableResolution())
-    return value;
-
-  const CSSValue* parsed_value = tokens->ParseForSyntax(
-      registration->Syntax(), document.GetSecureContextMode());
-
-  return parsed_value ? parsed_value : value;
-}
-
 void PropertyRegistry::MarkReferenced(const AtomicString& property_name) const {
   const PropertyRegistration* registration = Registration(property_name);
   if (registration) {

third_party/blink/renderer/core/css/property_registry.h

@@ -25,15 +25,6 @@ class CORE_EXPORT PropertyRegistry : public GarbageCollected<PropertyRegistry> {
 
   void Trace(blink::Visitor* visitor) { visitor->Trace(registrations_); }
 
-  // Parse the incoming value and return the parsed result, if:
-  //  1. A registration with the specified name exists, and
-  //  2. The incoming value is a CSSCustomPropertyDeclaration, has no
-  //     unresolved var-references and matches the registered syntax.
-  // Otherwise the incoming value is returned.
-  static const CSSValue* ParseIfRegistered(const Document& document,
-                                           const AtomicString& property_name,
-                                           const CSSValue*);
-
   void MarkReferenced(const AtomicString&) const;
   bool WasReferenced(const AtomicString&) const;
 

third_party/blink/web_tests/external/wpt/css/css-properties-values-api/typedom.html

@@ -3,6 +3,7 @@
 <meta name="assert" content="Verifies that registered custom properties interact correctly with CSS Typed OM" />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
 <style id=style>
     div {}
 </style>
@@ -10,28 +11,6 @@
 
 <script>
 
-// Properties are generated on demand, as `--prop-${g_counter}`.
-let g_counter = 1;
-
-// Generate a new property name.
-function gen_name() {
-    let name = `--prop-${g_counter}`;
-    g_counter++;
-    return name;
-}
-
-// Generate a property and return its name.
-function gen_prop(syntax, initialValue) {
-    let name = gen_name();
-    CSS.registerProperty({
-        name: name,
-        syntax: syntax,
-        initialValue: initialValue,
-        inherits: false
-    });
-    return name;
-}
-
 // Cleans style rules used for testing between every test.
 add_result_callback(function(){
     target.attributeStyleMap.clear();
@@ -39,16 +18,78 @@ add_result_callback(function(){
     style.sheet.rules[0].styleMap.clear();
 });
 
+// In the following utility functions, the 'map' parameter (if present)
+// can be any StylePropertyMap. (Not StylePropertyMapReadOnly).
+
+// Verifies that get()/getAll() reifies the specified property to a
+// CSSUnparsedValue, with a string serialization equal to 'value'.
+function verify_map_get_unparsed(map, name, value) {
+    map.set(name, value);
+
+    let specifiedValue = map.get(name);
+    assert_true(specifiedValue instanceof CSSUnparsedValue);
+    assert_equals(specifiedValue.toString(), value);
+
+    let allSpecifiedValues = map.getAll(name);
+    assert_equals(allSpecifiedValues.length, 1);
+    assert_true(allSpecifiedValues[0] instanceof CSSUnparsedValue);
+    assert_equals(allSpecifiedValues[0].toString(), value);
+}
+
+// Verifies that the specified value is accepted by set().
+function verify_map_set(map, name, value) {
+    map.set(name, value);
+    assert_equals(map.get(name).toString(), value.toString());
+}
+
+// Verifies that the specified value is NOT accepted by set().
+function verify_map_not_set(map, name, value) {
+    assert_throws(new TypeError(), () => {
+        map.set(name, value);
+    });
+}
+
+// Verifies that the specified value is NOT accepted by append().
+function verify_map_no_append(map, name, value) {
+    assert_throws(new TypeError(), () => {
+        map.append(name, value);
+    });
+}
+
+// Verifies that the property 'name' shows up on iteration, that it's reified
+// as a CSSUnparsedValue, and that the string representation is equal to
+// 'value'.
+function verify_map_iteration_unparsed(map, name, value) {
+    map.set(name, value);
+    let result = Array.from(map).filter(e => e[0] == name)[0];
+    assert_equals(result.length, 2);
+    let iter_value = result[1];
+    assert_equals(iter_value.length, 1);
+    assert_true(iter_value[0] instanceof CSSUnparsedValue);
+    assert_equals(iter_value[0].toString(), value);
+}
+
+// Verifies that CSSStyleValue.parse/parseAll results in a CSSStyleValue with
+// the 'expected' type.
+function verify_parsed_type(prop, value, expected) {
+    let parse_value = CSSStyleValue.parse(prop, value);
+    let parse_all_value = CSSStyleValue.parseAll(prop, value);
+
+    assert_true(parse_value instanceof expected);
+    assert_true(parse_all_value.every(x => x instanceof expected))
+}
+
 // On the target element, verify that computed value of 'name' is an instance
 // of 'expected' and not an instance of CSSUnparsedValue.
 //
-// If 'value' is non-null, that value is first set on the attributeStyleMap
-// of the target.
-function assert_computed_type(name, value, expected) {
+// If 'value' is non-null, that value is first set using the style attribute
+// of the target element.
+function verify_computed_type(name, value, expected) {
     if (expected == CSSUnparsedValue) {
         throw 'CSSUnparsedValue may not be used as expected type';
     }
 
+    try {
         if (value != null) {
             target.style = `${name}: ${value}`;
         }
@@ -57,36 +98,43 @@ function assert_computed_type(name, value, expected) {
 
         assert_false(computedValue instanceof CSSUnparsedValue);
         assert_true(computedValue instanceof expected);
-
+    } finally {
         if (value != null) {
             target.style = '';
         }
+    }
 }
 
-function assert_attribute_get_type(styleDecl, propertyMap, syntax, value, expected) {
-    let name = gen_name();
-    styleDecl.setProperty(name, value);
-
-    assert_true(propertyMap.get(name) instanceof CSSUnparsedValue);
-
-    CSS.registerProperty({
-        name: name,
-        syntax: syntax,
-        initialValue: value,
-        inherits: false
-    });
+// Verifies that the property 'name' shows up on iteration, that it's reified
+// to the specified type, and that the string representation is equal to 'value'.
+function verify_computed_iteration_type(name, value, type) {
+    target.attributeStyleMap.set(name, value);
+    let result = Array.from(target.computedStyleMap()).filter(e => e[0] == name)[0];
+    assert_equals(result.length, 2);
+    let iter_value = result[1];
+    assert_equals(iter_value.length, 1);
+    assert_true(iter_value[0] instanceof type);
+    assert_equals(iter_value[0].toString(), value);
+}
 
-    if (expected == CSSStyleValue) {
-        assert_false(propertyMap.get(name) instanceof CSSUnparsedValue);
-    }
+// Run the same test twice: once for each StylePropertyMap.
+//
+// https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap
+function test_specified_maps(func, description) {
+    test(function(){
+        func(target.attributeStyleMap)
+    }, description + ' [attributeStyleMap]');
 
-    assert_true(propertyMap.get(name) instanceof expected);
+    test(function(){
+        let rule = style.sheet.rules[0];
+        func(rule.styleMap)
+    }, description + ' [styleMap]');
 }
 
-// computedStyleMap
+// StylePropertyMapReadOnly.get
 
 test(function(){
-    let name = gen_prop('*', 'if(){}');
+    let name = generate_property('*', 'if(){}');
     assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
 
     target.attributeStyleMap.set(name, 'as{}df');
@@ -95,92 +143,94 @@ test(function(){
 }, 'Computed * is reified as CSSUnparsedValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<angle>', '42deg'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<angle> | fail', 'fail'), '42deg', CSSUnitValue);
+    verify_computed_type(generate_property('<angle>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <angle> '), '42deg', CSSUnitValue);
 }, 'Computed <angle> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<color>', '#fefefe'), null, CSSStyleValue);
-    assert_computed_type(gen_prop('<color> | fail', 'fail'), null, CSSStyleValue);
+    verify_computed_type(generate_property('<color>'), null, CSSStyleValue);
+    verify_computed_type(generate_property('fail | <color> '), null, CSSStyleValue);
 }, 'Computed <color> is reified as CSSStyleValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<custom-ident>', 'none'), null, CSSKeywordValue);
-    assert_computed_type(gen_prop('<custom-ident> | <length>', '10px'), 'none', CSSKeywordValue);
+    verify_computed_type(generate_property('<custom-ident>'), null, CSSKeywordValue);
+    verify_computed_type(generate_property('<custom-ident> | <length>'), 'none', CSSKeywordValue);
 }, 'Computed <custom-ident> is reified as CSSKeywordValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<image>', 'url(thing.png)'), null, CSSImageValue);
-    assert_computed_type(gen_prop('<image> | fail', 'fail'), 'url(thing.png)', CSSImageValue);
+    verify_computed_type(generate_property('<image>'), null, CSSImageValue);
+    verify_computed_type(generate_property('fail | <image> '), 'url(thing.png)', CSSImageValue);
 }, 'Computed <image> [url] is reified as CSSImageValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<integer>', '100'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<integer> | fail', 'fail'), '100', CSSUnitValue);
+    verify_computed_type(generate_property('<integer>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <integer> '), '100', CSSUnitValue);
 }, 'Computed <integer> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<length-percentage>', '10%'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), '10%', CSSUnitValue);
+    verify_computed_type(generate_property('<length-percentage>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <length-percentage> '), '10%', CSSUnitValue);
 }, 'Computed <length-percentage> [%] is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<length-percentage>', '10px'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), '10px', CSSUnitValue);
+    verify_computed_type(generate_property('<length-percentage>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <length-percentage> '), '10px', CSSUnitValue);
 }, 'Computed <length-percentage> [px] is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<length-percentage>', 'calc(10px + 10%)'), null, CSSMathSum);
-    assert_computed_type(gen_prop('<length-percentage> | fail', 'fail'), 'calc(10px + 10%)', CSSMathSum);
+    verify_computed_type(generate_property({syntax: '<length-percentage>', initialValue: 'calc(10% + 10px)'}), null, CSSMathSum);
+    verify_computed_type(generate_property('fail | <length-percentage> '), 'calc(10px + 10%)', CSSMathSum);
 }, 'Computed <length-percentage> [px + %] is reified as CSSMathSum');
 
 test(function(){
-    assert_computed_type(gen_prop('<length>', '10px'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<length> | fail', 'fail'), '10px', CSSUnitValue);
+    verify_computed_type(generate_property('<length>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <length> '), '10px', CSSUnitValue);
 }, 'Computed <length> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<number>', '42'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<number> | fail', 'fail'), '42', CSSUnitValue);
+    verify_computed_type(generate_property('<number>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <number> '), '42', CSSUnitValue);
 }, 'Computed <number> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<percentage>', '10%'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<percentage> | fail', 'fail'), '10%', CSSUnitValue);
+    verify_computed_type(generate_property('<percentage>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <percentage> '), '10%', CSSUnitValue);
 }, 'Computed <percentage> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<resolution>', '300dpi'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<resolution> | fail', 'fail'), '300dpi', CSSUnitValue);
+    verify_computed_type(generate_property('<resolution>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <resolution> '), '300dpi', CSSUnitValue);
 }, 'Computed <resolution> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<time>', '42s'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<time> | fail', 'fail'), '42s', CSSUnitValue);
+    verify_computed_type(generate_property('<time>'), null, CSSUnitValue);
+    verify_computed_type(generate_property('fail | <time> '), '42s', CSSUnitValue);
 }, 'Computed <time> is reified as CSSUnitValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<url>', 'url(a)'), null, CSSStyleValue);
-    assert_computed_type(gen_prop('<url> | fail', 'fail'), 'url(a)', CSSStyleValue);
+    verify_computed_type(generate_property('<url>'), null, CSSStyleValue);
+    verify_computed_type(generate_property('fail | <url> '), 'url(a)', CSSStyleValue);
 }, 'Computed <url> is reified as CSSStyleValue');
 
 test(function(){
-    assert_computed_type(gen_prop('thing1 | THING2', 'thing1'), null, CSSKeywordValue);
-    assert_computed_type(gen_prop('thing1 | THING2 | <url>', 'url(fail)'), 'THING2', CSSKeywordValue);
+    verify_computed_type(generate_property('thing1 | THING2'), null, CSSKeywordValue);
+    verify_computed_type(generate_property('thing1 | THING2 | <url>'), 'THING2', CSSKeywordValue);
 }, 'Computed ident is reified as CSSKeywordValue');
 
 test(function(){
-    assert_computed_type(gen_prop('<length>+', '10px 20px'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<length>+', '0px 0px'), '10px 20px', CSSUnitValue);
+    verify_computed_type(generate_property('<length>+'), null, CSSUnitValue);
+    verify_computed_type(generate_property('<length>+'), '10px 20px', CSSUnitValue);
 }, 'First computed value correctly reified in space-separated list');
 
 test(function(){
-    assert_computed_type(gen_prop('<length>#', '10px, 20px'), null, CSSUnitValue);
-    assert_computed_type(gen_prop('<length>#', '0px, 0px'), '10px, 20px', CSSUnitValue);
+    verify_computed_type(generate_property('<length>#'), null, CSSUnitValue);
+    verify_computed_type(generate_property('<length>#'), '10px, 20px', CSSUnitValue);
 }, 'First computed value correctly reified in comma-separated list');
 
+// StylePropertyMapReadOnly.getAll
+
 test(function(){
-    let name = gen_prop('<length>+', '10px 20px');
+    let name = generate_property({syntax: '<length>+', initialValue: '10px 20px'});
     assert_equals(target.computedStyleMap().getAll(name).length, 2);
     assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
 
@@ -190,7 +240,7 @@ test(function(){
 }, 'All computed values correctly reified in space-separated list');
 
 test(function(){
-    let name = gen_prop('<length>#', '10px, 20px');
+    let name = generate_property({syntax: '<length>#', initialValue: '10px, 20px'});
     assert_equals(target.computedStyleMap().getAll(name).length, 2);
     assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
 
@@ -199,680 +249,601 @@ test(function(){
     assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
 }, 'All computed values correctly reified in comma-separated list');
 
-// attributeStyleMap.get / styleMap.get
+// StylePropertyMap.get/All
 
-function test_style_property_map_get(test_fn, name_fn) {
-    let rule = style.sheet.rules[0];
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('*'), 'foo');
+}, 'Specified * is reified as CSSUnparsedValue from get/getAll');
 
-    test(function(){
-        target.attributeStyleMap.clear();
-        test_fn(target.style, target.attributeStyleMap);
-    }, name_fn('attributeStyleMap'));
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('foo'), 'foo');
+}, 'Specified foo is reified as CSSUnparsedValue from get/getAll');
 
-    test(function(){
-        rule.styleMap.clear();
-        test_fn(rule.style, rule.styleMap);
-    }, name_fn('styleMap'));
-}
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<angle>'), '10deg');
+}, 'Specified <angle> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<color>'), 'green');
+}, 'Specified <color> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<custom-ident>'), 'foo');
+}, 'Specified <custom-ident> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<image>'), 'url("a")');
+}, 'Specified <image> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<integer>'), '1');
+}, 'Specified <integer> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<length-percentage>'), 'calc(10% + 10px)');
+}, 'Specified <length-percentage> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<length>'), '10px');
+}, 'Specified <length> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<number>'), '1');
+}, 'Specified <number> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<percentage>'), '10%');
+}, 'Specified <percentage> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<resolution>'), '10dpi');
+}, 'Specified <resolution> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<time>'), '1s');
+}, 'Specified <time> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Specified <transform-function> is reified as CSSUnparsedValue from get/getAll');
 
-test_style_property_map_get(function(styleDecl, propertyMap){
-    let name1 = gen_prop('<length>', '100px');
-    let name2 = gen_prop('<length>', '0px');
-    styleDecl.setProperty(name2, `var(${name1})`);
-    assert_true(propertyMap.get(name2) instanceof CSSUnparsedValue);
-}, name => `StylePropertyMap.get returns CSSUnparsedValue for value with var references (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    let name1 = gen_prop('<length>', '100px');
-    let name2 = gen_prop('<length>#', '0px');
-    styleDecl.setProperty(name2, `1px, var(${name1}), 3px`);
-    assert_true(propertyMap.get(name2) instanceof CSSUnparsedValue);
-}, name => `StylePropertyMap.get returns CSSUnparsedValue for value with var references in list (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '*', 'if(){}', CSSUnparsedValue);
-}, name => `StylePropertyMap.get returns CSSUnparsedValue for * (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<angle>', '42deg', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <angle> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<color>', '#fefefe', CSSStyleValue);
-}, name => `StylePropertyMap.get returns CSSStyleValue for <color> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<custom-ident>', 'none', CSSKeywordValue);
-}, name => `StylePropertyMap.get returns CSSKeywordValue for <custom-ident> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<image>', 'url(thing.png)', CSSImageValue);
-}, name => `StylePropertyMap.get returns CSSImageValue for <image> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<integer>', '100', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <integer> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', '10%', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <length-percentage> [10%] (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', '10px', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <length-percentage> [10px] (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<length-percentage>', 'calc(10px + 10%)', CSSMathSum);
-}, name => `StylePropertyMap.get returns CSSMathSum for <length-percentage> [calc(10px + 10%)] (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<length>', '10px', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <length> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<number>', '42', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <number> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<percentage>', '10%', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <percentage> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<resolution>', '300dpi', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <resolution> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<time>', '42s', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <time> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<url>', 'url(a)', CSSStyleValue);
-}, name => `StylePropertyMap.get returns CSSStyleValue for <url> (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, 'thing1 | THING2', 'thing1', CSSKeywordValue);
-}, name => `StylePropertyMap.get returns CSSKeywordValue for thing1 | THING2 (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<length>+', '10px 20px', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <length>+ (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    assert_attribute_get_type(styleDecl, propertyMap, '<length>#', '10px 20px', CSSUnitValue);
-}, name => `StylePropertyMap.get returns CSSUnitValue for <length># (${name})`);
-
-// attributeStyleMap.getAll
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    let name = gen_prop('<length>+', '0px');
-    styleDecl.setProperty(name, '10px 20px 30px');
-    assert_equals(propertyMap.getAll(name).length, 3);
-    assert_true(propertyMap.getAll(name).every(x => x instanceof CSSUnitValue));
-}, name => `StylePropertyMap.getAll returns a list of CSSUnitValues for <length>+ (${name})`);
-
-test_style_property_map_get(function(styleDecl, propertyMap){
-    let name = gen_prop('<length>#', '0px');
-    styleDecl.setProperty(name, '10px, 20px, 30px');
-    assert_equals(propertyMap.getAll(name).length, 3);
-    assert_true(propertyMap.getAll(name).every(x => x instanceof CSSUnitValue));
-}, name => `StylePropertyMap.getAll returns a list of CSSUnitValues for <length># (${name})`);
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Specified <transform-list> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<url>'), 'url("a")');
+}, 'Specified <url> is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<length>+'), '10px 11px');
+}, 'Specified <length>+ is reified as CSSUnparsedValue from get/getAll');
+
+test_specified_maps(function(map){
+    verify_map_get_unparsed(map, generate_property('<length>#'), '10px, 11px');
+}, 'Specified <length># is reified as CSSUnparsedValue from get/getAll');
 
 // StylePropertyMap.set
 
-function test_style_property_map_set_using_property_map(propertyMapName, propertyMap, options) {
-    test(function(){
-        let name = gen_prop(options.syntax, options.initialValue);
-        propertyMap.clear();
+// The following strings are valid for the specified syntax, and should be
+// accepted by set().
 
-        let ensureArray = v => v.constructor === Array ? v : [v];
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('*'), 'foo');
+}, 'Specified string "foo" accepted by set() for syntax *');
 
-        for (let value of options.shouldAccept)
-            propertyMap.set(name, ...ensureArray(value));
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('foo'), 'foo');
+}, 'Specified string "foo" accepted by set() for syntax foo');
 
-        for (let value of options.shouldReject) {
-            assert_throws(new TypeError(), () => propertyMap.set(name, ...ensureArray(value)));
-        }
-    }, `StylePropertyMap.set accepts correct CSSStyleValues for ${options.syntax} (${propertyMapName})`);
-}
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<angle>'), '10deg');
+}, 'Specified string "10deg" accepted by set() for syntax <angle>');
 
-// Verify that the correct CSSStyleValues are accepted/rejected for a registered
-// property with the specified syntax.
-//
-// The same test is performed twice: once for attributeStyleMap, and once
-// for styleMap.
-function test_style_property_map_set(options) {
-    test_style_property_map_set_using_property_map('attributeStyleMap', target.attributeStyleMap, options);
-    test_style_property_map_set_using_property_map('styleMap', style.sheet.rules[0].styleMap, options);
-}
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<color>'), 'green');
+}, 'Specified string "green" accepted by set() for syntax <color>');
 
-let unparsed = x => new CSSUnparsedValue([x]);
-let keyword = x => new CSSKeywordValue(x);
-let sum = (a, b) => new CSSMathSum(a, b);
-let url_image = x => CSSStyleValue.parse('background-image', x);
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<custom-ident>'), 'foo');
+}, 'Specified string "foo" accepted by set() for syntax <custom-ident>');
 
-test_style_property_map_set({
-    syntax: '*',
-    initialValue: 'none',
-    shouldAccept: [unparsed('thing')],
-    shouldReject: [CSS.px(15), keyword('none')],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<image>'), 'url("a")');
+}, 'Specified string "url("a")" accepted by set() for syntax <image>');
 
-test_style_property_map_set({
-    syntax: '<angle>',
-    initialValue: '0deg',
-    shouldAccept: [CSS.deg(42), CSS.turn(2), '42deg'],
-    shouldReject: [unparsed('42deg'), CSS.px(15), '50px', [CSS.deg(15), '10deg']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<integer>'), '1');
+}, 'Specified string "1" accepted by set() for syntax <integer>');
 
-test_style_property_map_set({
-    syntax: '<custom-ident>',
-    initialValue: 'none',
-    shouldAccept: [keyword('foo'), 'foo'],
-    shouldReject: [unparsed('foo'), CSS.px(15), '15px', [keyword('foo'), 'foo']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length-percentage>'), 'calc(10% + 10px)');
+}, 'Specified string "calc(10% + 10px)" accepted by set() for syntax <length-percentage>');
 
-test_style_property_map_set({
-    syntax: '<image>',
-    initialValue: 'url(a)',
-    shouldAccept: [url_image('url(b)'), 'url(b)'],
-    shouldReject: [unparsed('url(b)'), CSS.px(100), '50px', [url_image('url(1)'), 'url(2)']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>'), '10px');
+}, 'Specified string "10px" accepted by set() for syntax <length>');
 
-test_style_property_map_set({
-    syntax: '<integer>',
-    initialValue: '0',
-    shouldAccept: [CSS.number(1), CSS.number(-42), '1', '-42', 'calc(2.4)'],
-    shouldReject: [unparsed('42'), CSS.px(100), '50px', [CSS.number(42), '42'], 'calc(2px + 1px)'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<number>'), '1');
+}, 'Specified string "1" accepted by set() for syntax <number>');
 
-test_style_property_map_set({
-    syntax: '<length-percentage>',
-    initialValue: '0px',
-    shouldAccept: [CSS.percent(10), CSS.px(1), CSS.em(1), '10px', '10%'],
-    shouldReject: [unparsed('10%'), unparsed('10px'), CSS.dpi(1), 'url(b)', [CSS.percent(10), '10%']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<percentage>'), '10%');
+}, 'Specified string "10%" accepted by set() for syntax <percentage>');
 
-test_style_property_map_set({
-    syntax: '<length>',
-    initialValue: '0px',
-    shouldAccept: [CSS.px(10), CSS.em(10), CSS.vh(200), sum(CSS.px(10), CSS.em(20)), '10em', 'calc(10px + 10em)'],
-    shouldReject: [unparsed('10px'), CSS.percent(1), 'url(b)', [CSS.em(10), '10px']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<resolution>'), '10dpi');
+}, 'Specified string "10dpi" accepted by set() for syntax <resolution>');
 
-test_style_property_map_set({
-    syntax: '<number>',
-    initialValue: '0',
-    shouldAccept: [CSS.number(1337), CSS.number(-42.5), '1337', '-42.5'],
-    shouldReject: [unparsed('42'), CSS.px(15), '#fef', [CSS.number(-42.5), '42.5']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<time>'), '1s');
+}, 'Specified string "1s" accepted by set() for syntax <time>');
 
-test_style_property_map_set({
-    syntax: '<percentage>',
-    initialValue: '0%',
-    shouldAccept: [CSS.percent(10), '10%'],
-    shouldReject: [unparsed('10%'), CSS.px(1), '#fef', [CSS.percent(10), '1%']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Specified string "matrix(0, 0, 0, 0, 0, 0)" accepted by set() for syntax <transform-function>');
 
-test_style_property_map_set({
-    syntax: '<resolution>',
-    initialValue: '0dpi',
-    shouldAccept: [CSS.dpi(100), CSS.dpcm(10), CSS.dppx(50), '100dpi'],
-    shouldReject: [unparsed('42'), CSS.px(15), '#fef', [CSS.dpi(1), '2dpi']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Specified string "matrix(0, 0, 0, 0, 0, 0)" accepted by set() for syntax <transform-list>');
 
-test_style_property_map_set({
-    syntax: '<time>',
-    initialValue: '0s',
-    shouldAccept: [CSS.s(42), CSS.ms(16), '16ms'],
-    shouldReject: [unparsed('42s'), CSS.px(15), '#fef', [CSS.s(5), '6s']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<url>'), 'url("a")');
+}, 'Specified string "url("a")" accepted by set() for syntax <url>');
 
-test_style_property_map_set({
-    syntax: '<url>',
-    initialValue: 'url(a)',
-    shouldAccept: [url_image('url(b)')],
-    shouldReject: [unparsed('url(b)'), CSS.px(100), '#fef', [url_image('url(1)'), 'url(2)']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>+'), '10px 11px');
+}, 'Specified string "10px 11px" accepted by set() for syntax <length>+');
 
-test_style_property_map_set({
-    syntax: '<transform-list>',
-    initialValue: 'translateX(0px)',
-    shouldAccept: [CSSStyleValue.parse('transform', 'translateX(10px)')],
-    shouldReject: [unparsed('transformX(10px'), CSS.px(100), '#fef'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>#'), '10px, 11px');
+}, 'Specified string "10px, 11px" accepted by set() for syntax <length>#');
 
-test_style_property_map_set({
-    syntax: 'none | thing | THING',
-    initialValue: 'none',
-    shouldAccept: [keyword('thing'), keyword('THING'), 'thing'],
-    shouldReject: [unparsed('thing'), CSS.px(15), keyword('notathing'), 'notathing', [keyword('thing'), keyword('thing')]],
-});
+// The following strings are invalid for the specified syntax, but should
+// should be accepted by set().
 
-test_style_property_map_set({
-    syntax: '<angle> | <length>',
-    initialValue: '0deg',
-    shouldAccept: [CSS.deg(42), CSS.turn(2), CSS.px(10), CSS.em(10), '10deg', '10px'],
-    shouldReject: [unparsed('42deg'), unparsed('20px'), CSS.s(1), '#fef', [CSS.deg(42), '21deg']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('foo'), 'bar');
+}, 'Specified string "bar" accepted by set() for syntax foo');
 
-// StylePropertyMap.set for list-valued properties:
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<angle>'), '10px');
+}, 'Specified string "10px" accepted by set() for syntax <angle>');
 
-test_style_property_map_set({
-    syntax: '<angle>+',
-    initialValue: '0deg',
-    shouldAccept: [CSS.deg(15), [CSS.deg(15), '10deg'], '15deg 10deg'],
-    shouldReject: [[CSS.deg(15), CSS.px(10)], '15deg 10px'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<color>'), '10px');
+}, 'Specified string "10px" accepted by set() for syntax <color>');
 
-test_style_property_map_set({
-    syntax: '<custom-ident>+',
-    initialValue: 'none',
-    shouldAccept: [keyword('foo'), [keyword('foo'), 'bar'], 'foo bar'],
-    shouldReject: [[keyword('foo'), CSS.px(10)], 'foo 10px'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<custom-ident>'), '10px');
+}, 'Specified string "10px" accepted by set() for syntax <custom-ident>');
 
-test_style_property_map_set({
-    syntax: '<image>+',
-    initialValue: 'url(a)',
-    shouldAccept: [url_image('url(1)'), [url_image('url(1)'), 'url(2)'], 'url(1) url(2)'],
-    shouldReject: [[url_image('url(1)'), CSS.px(10)], 'url(1) 10px'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<image>'), 'a');
+}, 'Specified string "a" accepted by set() for syntax <image>');
 
-test_style_property_map_set({
-    syntax: '<integer>+',
-    initialValue: '0',
-    shouldAccept: [CSS.number(42), [CSS.number(42), '42'], '42 42', 'calc(2.4) calc(2.6)'],
-    shouldReject: [[CSS.number(42), keyword('noint')], '42 noint', 'calc(2px + 2px)'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<integer>'), 'float');
+}, 'Specified string "float" accepted by set() for syntax <integer>');
 
-test_style_property_map_set({
-    syntax: '<length-percentage>+',
-    initialValue: '0px',
-    shouldAccept: [CSS.percent(10), [CSS.percent(10), '10%']],
-    shouldReject: [[CSS.percent(10), keyword('nolength')], '10% nolength'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length-percentage>'), 'red');
+}, 'Specified string "red" accepted by set() for syntax <length-percentage>');
 
-test_style_property_map_set({
-    syntax: '<length>+',
-    initialValue: '0px',
-    shouldAccept: [CSS.em(10), [CSS.em(10), '10px']],
-    shouldReject: [[CSS.em(10), keyword('nolength'), '10em nolength']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>'), 'red');
+}, 'Specified string "red" accepted by set() for syntax <length>');
 
-test_style_property_map_set({
-    syntax: '<number>+',
-    initialValue: '0',
-    shouldAccept: [CSS.number(-42.5), [CSS.number(-42.5), '42.5'], '-42.5 42.5'],
-    shouldReject: [[CSS.number(-42.5), CSS.px(10)], '-42.5 10px'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<number>'), 'red');
+}, 'Specified string "red" accepted by set() for syntax <number>');
 
-test_style_property_map_set({
-    syntax: '<percentage>+',
-    initialValue: '0%',
-    shouldAccept: [CSS.percent(10), [CSS.percent(10), '1%'], '10% 1%'],
-    shouldReject: [[CSS.percent(10), keyword('foo')], '10% foo'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<percentage>'), 'var(--x)');
+}, 'Specified string "var(--x)" accepted by set() for syntax <percentage>');
 
-test_style_property_map_set({
-    syntax: '<resolution>+',
-    initialValue: '0dpi',
-    shouldAccept: [CSS.dpi(1), [CSS.dpi(1), '2dpi'], '1dpi 2dpi'],
-    shouldReject: [[CSS.dpi(1), keyword('foo')], '1dpi foo'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<resolution>'), 'blue');
+}, 'Specified string "blue" accepted by set() for syntax <resolution>');
 
-test_style_property_map_set({
-    syntax: '<time>+',
-    initialValue: '0s',
-    shouldAccept: [CSS.s(5), [CSS.s(5), '6s'], '5s 6s'],
-    shouldReject: [[CSS.s(5), keyword('foo')], '5s foo'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<time>'), '1meter');
+}, 'Specified string "1meter" accepted by set() for syntax <time>');
 
-test_style_property_map_set({
-    syntax: '<url>+',
-    initialValue: 'url(a)',
-    shouldAccept: [url_image('url(1)'), [url_image('url(1)'), 'url(2)'], 'url(1) url(2)'],
-    shouldReject: [[url_image('url(1)'), CSS.px(10)], 'url(1) 10px'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<transform-function>'), 'foo(0)');
+}, 'Specified string "foo(0)" accepted by set() for syntax <transform-function>');
 
-test_style_property_map_set({
-    syntax: 'thing+',
-    initialValue: 'thing',
-    shouldAccept: [keyword('thing'), [keyword('thing'), 'thing'], 'thing thing'],
-    shouldReject: [[keyword('thing'), CSS.px(10)], 'thing 10px'],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<transform-list>'), 'bar(1)');
+}, 'Specified string "bar(1)" accepted by set() for syntax <transform-list>');
 
-test_style_property_map_set({
-    syntax: '<length>#',
-    initialValue: '0px',
-    shouldAccept: [CSS.em(10), [CSS.em(10), '10px']],
-    shouldReject: [[CSS.em(10), keyword('nolength'), '10em nolength']],
-});
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<url>'), 'a');
+}, 'Specified string "a" accepted by set() for syntax <url>');
 
-function test_append_for_property_map(propertyMapName, propertyMap, options) {
-    test(function(){
-        let name = gen_prop(options.syntax, options.initialValue);
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>+'), 'a b');
+}, 'Specified string "a b" accepted by set() for syntax <length>+');
 
-        let ensureArray = v => v.constructor === Array ? v : [v];
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>#'), 'a, b');
+}, 'Specified string "a, b" accepted by set() for syntax <length>#');
 
-        for (let value of options.values) {
-            propertyMap.clear();
+// CSSUnparsedValue should always be accepted by any custom property,
+// regardless of registation status.
 
-            if (value.base !== null)
-                propertyMap.set(name, ...ensureArray(value.base));
+const unparsed = CSSStyleValue.parse('--x', 'foo bar thing');
 
-            // If 'null' is expected, it means we expect the append to fail.
-            if (value.expect !== null) {
-                propertyMap.append(name, ...ensureArray(value.append));
-                let actual = Array.from(propertyMap.getAll(name)).join(' ');
-                assert_equals(actual, value.expect);
-            } else {
-                assert_throws(new TypeError(), () => propertyMap.append(name, ...ensureArray(value.append)));
-            }
-        }
-    }, `StylePropertyMap.append accepts correct CSSStyleValues for ${options.syntax} (${propertyMapName})`);
-}
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('*'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax *');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('foo'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax foo');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<angle>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <angle>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<color>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <color>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<custom-ident>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <custom-ident>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<image>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <image>');
 
-// Verify that the correct CSSStyleValues are accepted/rejected when
-// appending values to list-valued properties.
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<integer>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <integer>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length-percentage>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <length-percentage>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <length>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<number>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <number>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<percentage>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <percentage>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<resolution>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <resolution>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<time>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <time>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<transform-function>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <transform-function>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<transform-list>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <transform-list>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<url>'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <url>');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>+'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <length>+');
+
+test_specified_maps(function(map){
+    verify_map_set(map, generate_property('<length>#'), unparsed);
+}, 'CSSUnparsedValue is accepted via set() for syntax <length>#');
+
+// CSSStyleValues which aren't CSSUnparsedValues aren't accepted by set(),
+// even if they're a value which is compatible with the syntax.
 //
-// The same test is performed twice: once for attributeStyleMap, and once
-// for styleMap.
-function test_append(options) {
-    test_append_for_property_map('attributeStyleMap', target.attributeStyleMap, options);
-    test_append_for_property_map('styleMap', style.sheet.rules[0].styleMap, options);
-}
+// https://drafts.css-houdini.org/css-properties-values-api-1/#cssom
+const zero_matrix = CSSStyleValue.parse('transform', 'matrix(0, 0, 0, 0, 0, 0)');
+const image_value = CSSStyleValue.parse('background-image', 'url(a)');
 
-test_append({
-    syntax: '<angle>+',
-    initialValue: '0deg',
-    values: [
-        { base: [CSS.deg(1)], append: [CSS.px(1)], expect: null },
-        { base: [CSS.deg(1)], append: [CSS.deg(2), CSS.px(1)], expect: null },
-        { base: [CSS.deg(1)], append: [CSS.deg(2), '1px'], expect: null },
-        { base: [CSS.deg(1)], append: [CSS.turn(2), CSS.deg(3)], expect: '1deg 2turn 3deg' },
-        { base: [CSS.deg(1), CSS.deg(2)], append: [CSS.deg(3)], expect: '1deg 2deg 3deg' },
-        { base: [CSS.deg(1)], append: [CSS.deg(2), '3deg'], expect: '1deg 2deg 3deg' },
-        { base: [CSS.deg(1)], append: [CSS.deg(2), '3turn 4deg'], expect: '1deg 2deg 3turn 4deg' },
-        { base: null, append: [CSS.deg(1), '2deg'], expect: '1deg 2deg' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('*'), new CSSKeywordValue('foo'));
+}, 'CSSKeywordValue rejected by set() for syntax *');
 
-test_append({
-    syntax: '<custom-ident>+',
-    initialValue: 'none',
-    values: [
-        { base: [keyword('foo')], append: [CSS.px(1)], expect: null },
-        { base: [keyword('foo')], append: [keyword('bar'), CSS.px(1)], expect: null },
-        { base: [keyword('foo')], append: [keyword('bar'), '1px'], expect: null },
-        { base: [keyword('foo')], append: [keyword('bar'), keyword('baz')], expect: 'foo bar baz' },
-        { base: [keyword('foo'), keyword('bar')], append: [keyword('baz')], expect: 'foo bar baz' },
-        { base: [keyword('foo')], append: [keyword('bar'), 'baz'], expect: 'foo bar baz' },
-        { base: [keyword('foo')], append: [keyword('bar'), 'baz zim'], expect: 'foo bar baz zim' },
-        { base: null, append: [keyword('foo'), 'bar'], expect: 'foo bar' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('foo'), new CSSKeywordValue('foo'));
+}, 'CSSKeywordValue rejected by set() for syntax foo');
 
-['<image>+', '<url>+'].forEach((syntax) => {
-    test_append({
-        syntax: syntax,
-        initialValue: 'url(0)',
-        values: [
-            { base: [url_image('url("1")')], append: [CSS.px(1)], expect: null },
-            { base: [url_image('url("1")')], append: [url_image('url("2")'), CSS.px(1)], expect: null },
-            { base: [url_image('url("1")')], append: [url_image('url("2")'), '1px'], expect: null },
-            { base: [url_image('url("1")')], append: [url_image('url("2")'), url_image('url("3")')], expect: 'url("1") url("2") url("3")' },
-            { base: [url_image('url("1")'), url_image('url("2")')], append: [url_image('url("3")')], expect: 'url("1") url("2") url("3")' },
-            { base: [url_image('url("1")')], append: [url_image('url("2")'), 'url("3")'], expect: 'url("1") url("2") url("3")' },
-            { base: [url_image('url("1")')], append: [url_image('url("2")'), 'url("3") url("4")'], expect: 'url("1") url("2") url("3") url("4")' },
-            { base: null, append: [url_image('url("1")'), 'url("2")'], expect: 'url("1") url("2")' },
-        ],
-    });
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<angle>'), CSS.deg(10));
+}, 'CSSUnitValue rejected by set() for syntax <angle>');
 
-test_append({
-    syntax: '<integer>+',
-    initialValue: '0',
-    values: [
-        { base: [CSS.number(1)], append: [CSS.px(1)], expect: null },
-        { base: [CSS.number(1)], append: [CSS.number(2), CSS.px(1)], expect: null },
-        { base: [CSS.number(1)], append: [CSS.number(2), 'noint'], expect: null },
-        { base: [CSS.number(1)], append: [CSS.number(2), CSS.number(3)], expect: '1 2 3' },
-        { base: [CSS.number(1), CSS.number(2)], append: [CSS.number(3)], expect: '1 2 3' },
-        { base: [CSS.number(1)], append: [CSS.number(2), '3'], expect: '1 2 3' },
-        { base: [CSS.number(1)], append: [CSS.number(2), '3 4'], expect: '1 2 3 4' },
-        { base: null, append: [CSS.number(1), '2'], expect: '1 2' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<custom-ident>'), new CSSKeywordValue('foo'));
+}, 'CSSKeywordValue rejected by set() for syntax <custom-ident>');
 
-test_append({
-    syntax: '<length-percentage>+',
-    initialValue: '0px',
-    values: [
-        { base: [CSS.px(1)], append: [keyword('nolength')], expect: null },
-        { base: [CSS.px(1)], append: [CSS.px(2), keyword('nolength')], expect: null },
-        { base: [CSS.px(1)], append: [CSS.px(2), 'nolength'], expect: null },
-        { base: [CSS.px(1)], append: [CSS.px(2), CSS.percent(3)], expect: '1px 2px 3%' },
-        { base: [CSS.px(1), CSS.px(2)], append: [CSS.percent(3)], expect: '1px 2px 3%' },
-        { base: [CSS.px(1)], append: [CSS.percent(2), '3px'], expect: '1px 2% 3px' },
-        { base: [CSS.px(1)], append: [CSS.px(2), '3% 4px'], expect: '1px 2px 3% 4px' },
-        { base: null, append: [CSS.px(1), '2%'], expect: '1px 2%' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<image>'), image_value);
+}, 'CSSImageValue rejected by set() for syntax <image>');
 
-test_append({
-    syntax: '<length>+',
-    initialValue: '0',
-    values: [
-        { base: [CSS.px(1)], append: [keyword('nolength')], expect: null },
-        { base: [CSS.px(1)], append: [CSS.px(2), keyword('nolength')], expect: null },
-        { base: [CSS.px(1)], append: [CSS.px(2), 'nolength'], expect: null },
-        { base: [CSS.px(1)], append: [CSS.em(2), CSS.px(3)], expect: '1px 2em 3px' },
-        { base: [CSS.px(1), CSS.em(2)], append: [CSS.vh(3)], expect: '1px 2em 3vh' },
-        { base: [CSS.px(1)], append: [CSS.em(2), '3px'], expect: '1px 2em 3px' },
-        { base: [CSS.px(1)], append: [CSS.px(2), '3em 4cm'], expect: '1px 2px 3em 4cm' },
-        { base: null, append: [CSS.vh(1), '2px'], expect: '1vh 2px' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<integer>'), CSS.number(1));
+}, 'CSSUnitValue rejected by set() for syntax <integer>');
 
-test_append({
-    syntax: '<number>+',
-    initialValue: '0',
-    values: [
-        { base: [CSS.number(-1)], append: [keyword('NaN')], expect: null },
-        { base: [CSS.number(-1)], append: [CSS.number(2.5), keyword('NaN')], expect: null },
-        { base: [CSS.number(-1)], append: [CSS.number(2.5), '1px'], expect: null },
-        { base: [CSS.number(-1)], append: [CSS.number(2.5), CSS.number(3.2)], expect: '-1 2.5 3.2' },
-        { base: [CSS.number(-1), CSS.number(2.5)], append: [CSS.number(3.2)], expect: '-1 2.5 3.2' },
-        { base: [CSS.number(-1)], append: [CSS.number(2.5), '3.2'], expect: '-1 2.5 3.2' },
-        { base: [CSS.number(-1)], append: [CSS.number(2.5), '3.2 4'], expect: '-1 2.5 3.2 4' },
-        { base: null, append: [CSS.number(-1), '2.5'], expect: '-1 2.5' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<length-percentage>'), CSS.px(10));
+}, 'CSSUnitValue rejected by set() for syntax <length-percentage>');
 
-test_append({
-    syntax: '<percentage>+',
-    initialValue: '0%',
-    values: [
-        { base: [CSS.percent(1)], append: [CSS.px(1)], expect: null },
-        { base: [CSS.percent(1)], append: [CSS.percent(2), CSS.px(1)], expect: null },
-        { base: [CSS.percent(1)], append: [CSS.percent(2), '1px'], expect: null },
-        { base: [CSS.percent(1)], append: [CSS.percent(2), CSS.percent(3)], expect: '1% 2% 3%' },
-        { base: [CSS.percent(1), CSS.percent(2)], append: [CSS.percent(3)], expect: '1% 2% 3%' },
-        { base: [CSS.percent(1)], append: [CSS.percent(2), '3%'], expect: '1% 2% 3%' },
-        { base: [CSS.percent(1)], append: [CSS.percent(2), '3% 4%'], expect: '1% 2% 3% 4%' },
-        { base: null, append: [CSS.percent(1), '2%'], expect: '1% 2%' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<length>'), CSS.px(10));
+}, 'CSSUnitValue rejected by set() for syntax <length>');
 
-test_append({
-    syntax: '<resolution>+',
-    initialValue: '0dpi',
-    values: [
-        { base: [CSS.dpi(1)], append: [CSS.px(1)], expect: null },
-        { base: [CSS.dpi(1)], append: [CSS.dpi(2), CSS.px(1)], expect: null },
-        { base: [CSS.dpi(1)], append: [CSS.dpi(2), '1px'], expect: null },
-        { base: [CSS.dpi(1)], append: [CSS.dpi(2), CSS.dpi(3)], expect: '1dpi 2dpi 3dpi' },
-        { base: [CSS.dpi(1), CSS.dpi(2)], append: [CSS.dpi(3)], expect: '1dpi 2dpi 3dpi' },
-        { base: [CSS.dpi(1)], append: [CSS.dpi(2), '3dpi'], expect: '1dpi 2dpi 3dpi' },
-        { base: [CSS.dpi(1)], append: [CSS.dpi(2), '3dpi 4dpi'], expect: '1dpi 2dpi 3dpi 4dpi' },
-        { base: null, append: [CSS.dpi(1), '2dpi'], expect: '1dpi 2dpi' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<number>'), CSS.number(10));
+}, 'CSSUnitValue rejected by set() for syntax <number>');
 
-test_append({
-    syntax: '<time>+',
-    initialValue: '0s',
-    values: [
-        { base: [CSS.s(1)], append: [CSS.px(1)], expect: null },
-        { base: [CSS.s(1)], append: [CSS.s(2), CSS.px(1)], expect: null },
-        { base: [CSS.s(1)], append: [CSS.ms(2), '1px'], expect: null },
-        { base: [CSS.s(1)], append: [CSS.ms(2), CSS.s(3)], expect: '1s 2ms 3s' },
-        { base: [CSS.s(1), CSS.s(2)], append: [CSS.s(3)], expect: '1s 2s 3s' },
-        { base: [CSS.s(1)], append: [CSS.s(2), '3s'], expect: '1s 2s 3s' },
-        { base: [CSS.s(1)], append: [CSS.s(2), '3ms 4s'], expect: '1s 2s 3ms 4s' },
-        { base: null, append: [CSS.s(1), '2s'], expect: '1s 2s' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<percentage>'), CSS.percent(10));
+}, 'CSSUnitValue rejected by set() for syntax <percentage>');
 
-test_append({
-    syntax: 'foo+',
-    initialValue: 'foo',
-    values: [
-        { base: [keyword('foo')], append: [CSS.px(1)], expect: null },
-        { base: [keyword('foo')], append: [keyword('foo'), CSS.px(1)], expect: null },
-        { base: [keyword('foo')], append: [keyword('foo'), '1px'], expect: null },
-        { base: [keyword('foo')], append: [keyword('foo'), keyword('foo')], expect: 'foo foo foo' },
-        { base: [keyword('foo'), keyword('foo')], append: [keyword('foo')], expect: 'foo foo foo' },
-        { base: [keyword('foo')], append: [keyword('foo'), 'foo'], expect: 'foo foo foo' },
-        { base: [keyword('foo')], append: [keyword('foo'), 'foo foo'], expect: 'foo foo foo foo' },
-        { base: null, append: [keyword('foo'), keyword('foo')], expect: 'foo foo' },
-    ],
-});
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<resolution>'), CSS.dpi(10));
+}, 'CSSUnitValue rejected by set() for syntax <resolution>');
 
-// CSSStyleValue.parse/parseAll
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<time>'), CSS.s(10));
+}, 'CSSUnitValue rejected by set() for syntax <time>');
 
-function assert_parsed_type(prop, value, expected) {
-    let parse_value = CSSStyleValue.parse(prop, value);
-    let parse_all_value = CSSStyleValue.parseAll(prop, value);
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<transform-list>'), zero_matrix);
+}, 'CSSTransformValue rejected by set() for syntax <transform-list>');
 
-    assert_true(parse_value instanceof expected);
-    assert_true(parse_all_value.every(x => x instanceof expected))
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<length>+'), CSS.px(10), CSS.px(10));
+}, 'CSSUnitValue rejected by set() for syntax <length>+');
 
-    // If CSSStyleValue is expected, the values must be exactly CSSStyleValue.
-    // This is because CSSUnparsedValues are also CSSStyleValues, which would be
-    // wrong in this case.
-    if (expected == CSSStyleValue) {
-        assert_equals(parse_value.constructor, CSSStyleValue);
-        assert_true(parse_all_value.every(x => x.constructor == CSSStyleValue));
-    }
-}
+test_specified_maps(function(map){
+    verify_map_not_set(map, generate_property('<length>#'), CSS.px(10), CSS.px(10));
+}, 'CSSUnitValue rejected by set() for syntax <length>#');
 
-test(function(){
-    assert_parsed_type(gen_prop('*', 'if(){}'), 'while(){}', CSSUnparsedValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for *');
+// <color> has no CSSStyleValue subclass yet.
+// <url> has no CSSStyleValue subclass yet.
+// <transform-function> has no CSSStyleValue subclass yet.
+
+// StylePropertyMap.append
+
+// It is not allowed to append CSSStyleValues to custom properties, even
+// when the string matches the syntax of the custom property.
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('*'), 'a');
+}, 'Appending a string to * is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('foo+'), 'foo');
+}, 'Appending a string to foo+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<angle>+'), '10deg');
+}, 'Appending a string to <angle>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<color>+'), 'red');
+}, 'Appending a string to <color>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<custom-ident>+'), 'foo');
+}, 'Appending a string to <custom-ident>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<image>+'), 'url(a)');
+}, 'Appending a string to <image>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<integer>+'), 'a');
+}, 'Appending a string to <integer>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<length-percentage>+'), 'calc(10*% + 10px)');
+}, 'Appending a string to <length-percentage>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<length>+'), '10px');
+}, 'Appending a string to <length>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<number>+'), '1.3');
+}, 'Appending a string to <number>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<percentage>+'), '10%');
+}, 'Appending a string to <percentage>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<resolution>+'), '10dpi');
+}, 'Appending a string to <resolution>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<time>+'), '1s');
+}, 'Appending a string to <time>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<transform-function>+'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Appending a string to <transform-function>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Appending a string to <transform-list> is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<url>+'), 'url(a)');
+}, 'Appending a string to <url>+ is not allowed');
+
+test_specified_maps(function(map){
+    verify_map_no_append(map, generate_property('<length>#'), '10px');
+}, 'Appending a string to <length># is not allowed');
+
+// It is not allowed to append CSSStyleValues to custom properties, even
+// when the CSSStyleValue matches the syntax of the custom property.
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('*'), new CSSKeywordValue('foo'));
+}, 'Appending a CSSKeywordValue to * is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('foo+'), new CSSKeywordValue('foo'));
+}, 'Appending a CSSKeywordValue to foo+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<angle>+'), CSS.deg(10));
+}, 'Appending a CSSUnitValue to <angle>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<custom-ident>+'), new CSSKeywordValue('foo'));
+}, 'Appending a CSSKeywordValue to <custom-ident>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<image>+'), image_value);
+}, 'Appending a CSSImageValue to <image>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<integer>+'), CSS.number(1));
+}, 'Appending a CSSUnitValue to <integer>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<length-percentage>+'), CSS.px(10));
+}, 'Appending a CSSUnitValue to <length-percentage>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<length>+'), CSS.px(10));
+}, 'Appending a CSSUnitValue to <length>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<number>+'), CSS.number(10));
+}, 'Appending a CSSUnitValue to <number>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<percentage>+'), CSS.percent(10));
+}, 'Appending a CSSUnitValue to <percentage>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<resolution>+'), CSS.dpi(10));
+}, 'Appending a CSSUnitValue to <resolution>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<time>+'), CSS.s(10));
+}, 'Appending a CSSUnitValue to <time>+ is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<transform-list>'), zero_matrix);
+}, 'Appending a CSSKeywordValue to <transform-list> is not allowed');
+
+test_specified_maps(function(map) {
+    verify_map_no_append(map, generate_property('<length>#'), CSS.px(10));
+}, 'Appending a CSSUnitValue to <length># is not allowed');
+
+// <color> has no CSSStyleValue subclass yet.
+// <url> has no CSSStyleValue subclass yet.
+// <transform-function> has no CSSStyleValue subclass yet.
+
+// CSSStyleValue.parse/parseAll
 
 test(function(){
-    assert_parsed_type(gen_prop('<angle> | fail', 'fail'), '42deg', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <angle>');
+    verify_parsed_type(generate_property('*'), 'while(){}', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax *', CSSUnparsedValue);
 
 test(function(){
-    assert_parsed_type(gen_prop('<color> | fail', 'fail'), '#fefefe', CSSStyleValue);
-}, 'CSSStyleValue.parse[All] returns CSSStyleValue for <color>');
+    verify_parsed_type(generate_property('<angle>'), '42deg', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <angle>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<custom-ident> | <length>', '10px'), 'none', CSSKeywordValue);
-}, 'CSSStyleValue.parse[All] returns CSSKeywordValue for <custom-ident>');
+    verify_parsed_type(generate_property('<color>'), '#fefefe', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <color>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<image> | fail', 'fail'), 'url(thing.png)', CSSImageValue);
-}, 'CSSStyleValue.parse[All] returns CSSImageValue for <image> [url]');
+    verify_parsed_type(generate_property('<custom-ident> | <length>'), 'none', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <custom-ident> | <length>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<integer> | fail', 'fail'), '100', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <integer>');
+    verify_parsed_type(generate_property('<image>'), 'url(thing.png)', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <image>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<length-percentage> | fail', 'fail'), '10%', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <length-percentage> [%]');
+    verify_parsed_type(generate_property('<integer>'), '100', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <integer>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<length-percentage> | fail', 'fail'), '10px', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <length-percentage> [px]');
+    verify_parsed_type(generate_property('<length-percentage>'), '10%', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length-percentage> (10%)');
 
 test(function(){
-    assert_parsed_type(gen_prop('<length-percentage> | fail', 'fail'), 'calc(10px + 10%)', CSSMathSum);
-}, 'CSSStyleValue.parse[All] returns CSSMathSum for <length-percentage> [px + %]');
+    verify_parsed_type(generate_property('<length-percentage>'), '10px', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length-percentage> (10px)');
 
 test(function(){
-    assert_parsed_type(gen_prop('<length> | fail', 'fail'), '10px', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <length>');
+    verify_parsed_type(generate_property('<length-percentage>'), 'calc(10px + 10%)', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length-percentage> (calc(10px + 10%))');
 
 test(function(){
-    assert_parsed_type(gen_prop('<number> | fail', 'fail'), '42', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <number>');
+    verify_parsed_type(generate_property('<length>'), '10px', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<percentage> | fail', 'fail'), '10%', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <percentage>');
+    verify_parsed_type(generate_property('<number>'), '42', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <number>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<resolution> | fail', 'fail'), '300dpi', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <resolution>');
+    verify_parsed_type(generate_property('<percentage>'), '10%', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <percentage>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<time> | fail', 'fail'), '42s', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns CSSUnitValue for <time>');
+    verify_parsed_type(generate_property('<resolution>'), '300dpi', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <resolution>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<url> | fail', 'fail'), 'url(a)', CSSStyleValue);
-}, 'CSSStyleValue.parse[All] returns CSSStyleValue for <url>');
+    verify_parsed_type(generate_property('<time>'), '42s', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <time>');
 
 test(function(){
-    assert_parsed_type(gen_prop('thing1 | THING2 | <url>', 'url(fail)'), 'THING2', CSSKeywordValue);
-}, 'CSSStyleValue.parse[All] returns CSSKeywordValue for ident');
+    verify_parsed_type(generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <transform-function>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<length>+ | fail', 'fail'), '10px 20px', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns list of CSSUnitValues for <length>+');
+    verify_parsed_type(generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <transform-list>');
 
 test(function(){
-    assert_parsed_type(gen_prop('<length># | fail', 'fail'), '10px, 20px', CSSUnitValue);
-}, 'CSSStyleValue.parse[All] returns list of CSSUnitValues for <length>#');
+    verify_parsed_type(generate_property('<url>'), 'url(a)', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <url>');
 
-// Direct CSSStyleValue objects:
+test(function(){
+    verify_parsed_type(generate_property('thing1 | THING2 | <url>'), 'THING2', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax thing1 | THING2 | <url>');
 
-function gen_all_props() {
-    return [
-        gen_prop('*', 'foo'),
-        gen_prop('foo', 'foo'),
-        gen_prop('<angle>', '0deg'),
-        gen_prop('<color>', 'rgb(1, 2, 3)'),
-        gen_prop('<custom-ident>', 'thing'),
-        gen_prop('<image>', 'url(a)'),
-        gen_prop('<integer>', '0'),
-        gen_prop('<length-percentage>', 'calc(10px + 10%)'),
-        gen_prop('<length>', '0px'),
-        gen_prop('<number>', '0.5'),
-        gen_prop('<percentage>', '0%'),
-        gen_prop('<resolution>', '0dpi'),
-        gen_prop('<time>', '0s'),
-        gen_prop('<transform-function>', 'rotateX(0deg)'),
-        gen_prop('<transform-list>', 'rotateX(0deg)'),
-        gen_prop('<url>', 'url(a)')
-    ];
-}
+test(function(){
+    verify_parsed_type(generate_property('<length>+'), '10px 20px', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length>+');
 
 test(function(){
-    let props0 = gen_all_props();
-    let props1 = gen_all_props();
+    verify_parsed_type(generate_property('<length>#'), '10px, 20px', CSSUnparsedValue);
+}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length>#');
+
+// Direct CSSStyleValue objects:
 
-    for (let i = 0; i < props0.length; i++) {
-        let prop0 = props0[i];
-        let prop1 = props1[i];
+test_specified_maps(function(map){
+    for (let syntax of all_syntaxes()) {
+        let name = generate_property(syntax);
 
-        // Abuse computedStyleMap to get the initialValue (just to get some
-        // value that will parse for prop0/1's syntax).
-        let initialValue = target.computedStyleMap().get(prop0);
+        let initialValue = target.computedStyleMap().get(name);
 
         // We only care about direct CSSStyleValue instances in this test.
         // Ultimately, in some future version of CSS TypedOM, we may have no
@@ -881,139 +852,142 @@ test(function(){
             continue;
         }
 
-        let value = CSSStyleValue.parse(prop0, initialValue.toString());
+        // Verify that direct CSSStyleValues are rejected by set(). Two things
+        // should prevent this: 1) direct CSSStyleValues are not
+        // CSSUnparsedValues, and 2) direct CSSStyleValues are only valid for
+        // the property they were reified from.
+        verify_map_not_set(map, generate_property(syntax), initialValue);
+    }
+}, 'Direct CSSStyleValue may not be set');
 
-        // A value parsed for prop0 must be assignable to prop0.
-        target.attributeStyleMap.clear();
-        target.attributeStyleMap.set(prop0, value); // Don't throw.
+// StylePropertyMap iteration
 
-        // A value parsed for prop0 must not be assignable to prop1, even if
-        // the properties have compatible syntaxes.
-        assert_throws(new TypeError(), () => {
-            target.attributeStyleMap.clear();
-            target.attributeStyleMap.set(prop1, value);
-        });
-    }
-}, 'Direct CSSStyleValue instances are tied to their associated property');
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('*'), 'foo');
+}, 'Specified * is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('foo'), 'foo');
+}, 'Specified foo is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<angle>'), '10deg');
+}, 'Specified <angle> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<color>'), 'green');
+}, 'Specified <color> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<custom-ident>'), 'foo');
+}, 'Specified <custom-ident> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<image>'), 'url("a")');
+}, 'Specified <image> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<integer>'), '1');
+}, 'Specified <integer> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<length-percentage>'), 'calc(10% + 10px)');
+}, 'Specified <length-percentage> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<length>'), '10px');
+}, 'Specified <length> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<number>'), '1');
+}, 'Specified <number> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<percentage>'), '10%');
+}, 'Specified <percentage> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<resolution>'), '10dpi');
+}, 'Specified <resolution> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<time>'), '1s');
+}, 'Specified <time> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Specified <transform-function> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
+}, 'Specified <transform-list> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<url>'), 'url("a")');
+}, 'Specified <url> is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<length>+'), '10px 11px');
+}, 'Specified <length>+ is reified CSSUnparsedValue by iterator');
+
+test_specified_maps(function(map){
+    verify_map_iteration_unparsed(map, generate_property('<length>#'), '10px, 11px');
+}, 'Specified <length># is reified CSSUnparsedValue by iterator');
 
 // StylePropertyMapReadOnly iteration
 
 test(function(){
-    let name = gen_prop('<length>', '10px');
+    let name = generate_property({syntax: '<length>', initialValue: '10px'});
     let result = Array.from(target.computedStyleMap()).filter(e => e[0] == name)[0];
     assert_true(typeof(result) !== 'undefined');
 }, 'Registered property with initial value show up on iteration of computedStyleMap');
 
-// Verifies that iterating a StylePropertyMap[ReadOnly] yields correctly
-// typed objects for a given syntax/value.
-function test_iteration_type_for_property_map(propertyMapName, propertyMap, options) {
-    test(function(){
-        let name = gen_prop(options.syntax, options.initialValue);
-        if (propertyMap instanceof StylePropertyMap) {
-            // Only set the value if the propertyMap is mutable.
-            propertyMap.set(name, options.value);
-        }
-        let result = Array.from(propertyMap).filter(e => e[0] == name)[0];
-        let value = result[1];
-        assert_true(options.expect(value));
-    }, `Iteration on ${propertyMapName} produces correct type for ${options.syntax}`);
-}
-
-function test_iteration_type(options) {
-    test_iteration_type_for_property_map('computedStyleMap', target.computedStyleMap(), options);
-    test_iteration_type_for_property_map('attributeStyleMap', target.attributeStyleMap, options);
-    test_iteration_type_for_property_map('styleMap', style.sheet.rules[0].styleMap, options);
-}
-
-test_iteration_type({
-    syntax: '*',
-    initialValue: 'none',
-    value: 'thing',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnparsedValue,
-});
-
-test_iteration_type({
-    syntax: '<angle>',
-    initialValue: '0deg',
-    value: '42deg',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('*'), 'thing', CSSUnparsedValue);
+}, 'Computed * is reified as CSSUnparsedValue by iterator');
 
-test_iteration_type({
-    syntax: '<custom-ident>',
-    initialValue: 'none',
-    value: 'thing',
-    expect: v => v.length == 1 && v[0] instanceof CSSKeywordValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<angle>'), '42deg', CSSUnitValue);
+}, 'Computed <angle> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: '<image>',
-    initialValue: 'url(a)',
-    value: 'url(b)',
-    expect: v => v.length == 1 && v[0] instanceof CSSImageValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<custom-ident>'), 'thing', CSSKeywordValue);
+}, 'Computed <custom-ident> is reified as CSSKeywordValue by iterator');
 
-test_iteration_type({
-    syntax: '<integer>',
-    initialValue: '0',
-    value: '100',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<image>'), 'url(\"a\")', CSSImageValue);
+}, 'Computed <image> is reified as CSSImageValue by iterator');
 
-test_iteration_type({
-    syntax: '<length>',
-    initialValue: '0px',
-    value: '10px',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<integer>'), '100', CSSUnitValue);
+}, 'Computed <integer> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: '<number>',
-    initialValue: '0',
-    value: '42',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<length>'), '10px', CSSUnitValue);
+}, 'Computed <length> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: '<percentage>',
-    initialValue: '0%',
-    value: '10%',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<number>'), '42', CSSUnitValue);
+}, 'Computed <number> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: '<resolution>',
-    initialValue: '0dpi',
-    value: '300dpi',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<percentage>'), '10%', CSSUnitValue);
+}, 'Computed <percentage> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: '<time>',
-    initialValue: '0s',
-    value: '10s',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<resolution>'), '300dppx', CSSUnitValue);
+}, 'Computed <resolution> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: '<url>',
-    initialValue: 'url(a)',
-    value: 'url(b)',
-    expect: v => v.length == 1 && v[0].constructor === CSSStyleValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<time>'), '10s', CSSUnitValue);
+}, 'Computed <time> is reified as CSSUnitValue by iterator');
 
-test_iteration_type({
-    syntax: 'none | thing | THING',
-    initialValue: 'none',
-    value: 'THING',
-    expect: v => v.length == 1 && v[0] instanceof CSSKeywordValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('none | thing | THING'), 'THING', CSSKeywordValue);
+}, 'Computed none | thing | THING is reified as CSSKeywordValue by iterator');
 
-test_iteration_type({
-    syntax: '<angle> | <length>',
-    initialValue: '0deg',
-    value: '10px',
-    expect: v => v.length == 1 && v[0] instanceof CSSUnitValue,
-});
+test(function(){
+    verify_computed_iteration_type(generate_property('<angle> | <length>'), '10px', CSSUnitValue);
+}, 'Computed <angle> | <length> is reified as CSSUnitValue by iterator');
 
 </script>

third_party/blink/web_tests/fast/css/css-typedom-transform-function.html

@@ -22,23 +22,23 @@ CSS.registerProperty({
 
 test(() => {
   let value = CSSStyleValue.parse('--tf', 'translateX(0px)');
-  assert_equals(value.constructor, CSSStyleValue);
-}, 'Result of CSSStyleValue.parse for <transform-function> is a direct CSSStyleValue');
+  assert_true(value instanceof CSSUnparsedValue);
+}, 'Result of CSSStyleValue.parse for <transform-function> is a CSSUnparsedValue');
 
 test(() => {
   target.style = '--tf: translateX(0px)';
   let value = target.attributeStyleMap.get('--tf');
-  assert_equals(value.constructor, CSSStyleValue);
+  assert_true(value instanceof CSSUnparsedValue);
   target.style = '';
-}, 'Result of attributeStyleMap.get for <transform-function> is a direct CSSStyleValue');
+}, 'Result of attributeStyleMap.get for <transform-function> is a CSSUnparsedValue');
 
 test(() => {
   style.textContent = '#target { --tf: translateX(0px); }';
   let styleMap = style.sheet.rules[0].styleMap;
   let value = styleMap.get('--tf');
-  assert_equals(value.constructor, CSSStyleValue);
+  assert_true(value instanceof CSSUnparsedValue);
   style.textContent = '';
-}, 'Result of styleMap.get for <transform-function> is a direct CSSStyleValue');
+}, 'Result of styleMap.get for <transform-function> is a CSSUnparsedValue');
 
 test(() => {
   let value = target.computedStyleMap().get('--tf');