[css-pseudo] Support animations and transitions in ::marker

As resolved in https://github.com/w3c/csswg-drafts/issues/4814, allow
::marker to have animations or transitions. But only for the properties
that apply to ::marker.

TEST=external/wpt/css/css-animations/Document-getAnimations.tentative.html
TEST=external/wpt/css/css-animations/animationevent-marker-pseudoelement.html
TEST=external/wpt/css/css-animations/event-order.tentative.html
TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties.html
TEST=external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
TEST=external/wpt/css/css-transitions/Document-getAnimations.tentative.html
TEST=external/wpt/css/css-transitions/non-rendered-element-004.tentative.html

BUG=1054509

Change-Id: Ie86aeb42d4d311264fd5810c1ad89c0fa7b93ab0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2119518
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753752}

third_party/blink/renderer/core/css/css_properties.json5

@@ -466,6 +466,7 @@
       priority: "Animation",
       typedom_types: ["Time"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-direction",
@@ -479,6 +480,7 @@
       },
       priority: "Animation",
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-duration",
@@ -491,6 +493,7 @@
       priority: "Animation",
       typedom_types: ["Time"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-fill-mode",
@@ -503,6 +506,7 @@
       keywords: ["none", "forwards", "backwards", "both"],
       typedom_types: ["Keyword"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-iteration-count",
@@ -517,6 +521,7 @@
       keywords: ["infinite"],
       typedom_types: ["Keyword", "Number"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-name",
@@ -528,7 +533,8 @@
       priority: "Animation",
       keywords: ["none"],
       typedom_types: ["Keyword"],
-      separator: ","
+      separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-play-state",
@@ -541,6 +547,7 @@
       keywords: ["running", "paused"],
       typedom_types: ["Keyword"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "animation-timing-function",
@@ -565,6 +572,7 @@
       ],
       typedom_types: ["Keyword"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "transition-delay",
@@ -576,6 +584,7 @@
       priority: "Animation",
       typedom_types: ["Time"],
       separator: ",",
+      valid_for_marker: true,
     },
     {
       name: "transition-duration",
@@ -587,6 +596,7 @@
         attribute: "Duration",
       },
       priority: "Animation",
+      valid_for_marker: true,
     },
     {
       name: "transition-property",
@@ -597,7 +607,8 @@
       },
       priority: "Animation",
       keywords: ["none"],
-      typedom_types: ["Keyword"]
+      typedom_types: ["Keyword"],
+      valid_for_marker: true,
     },
     {
       name: "transition-timing-function",
@@ -621,6 +632,7 @@
         "step-end"],
       typedom_types: ["Keyword"],
       separator: ",",
+      valid_for_marker: true,
     },
 
     // High Priority and all other font properties.

third_party/blink/renderer/core/css/resolver/style_adjuster.cc

@@ -222,7 +222,6 @@ static void AdjustStyleForMarker(ComputedStyle& style,
     style.SetMarginEnd(Length::Fixed(margins.second));
   } else {
     // Outside list markers should generate a block container.
-    DCHECK_EQ(style.Display(), EDisplay::kInline);
     style.SetDisplay(EDisplay::kInlineBlock);
 
     // Do not break inside the marker, and honor the trailing spaces.

third_party/blink/renderer/core/css/resolver/style_resolver.cc

@@ -1399,6 +1399,8 @@ bool StyleResolver::ApplyAnimatedStandardProperties(
     });
     if (IsForcedColorsModeEnabled(state))
       filter = filter.Add(CSSProperty::kIsAffectedByForcedColors, true);
+    if (state.Style()->StyleType() == kPseudoIdMarker)
+      filter = filter.Add(CSSProperty::kValidForMarker, false);
     filter = filter.Add(CSSProperty::kAnimation, true);
     cascade->Analyze(interpolations, filter);
     cascade->Apply(&match_result, &interpolations, filter);
@@ -1449,6 +1451,23 @@ StyleRuleKeyframes* StyleResolver::FindKeyframesRule(
   return nullptr;
 }
 
+static bool PassesPropertyFilter(ValidPropertyFilter valid_property_filter,
+                                 CSSPropertyID property,
+                                 const Document& document) {
+  switch (valid_property_filter) {
+    case ValidPropertyFilter::kNoFilter:
+      return true;
+    case ValidPropertyFilter::kFirstLetter:
+      return CSSProperty::Get(property).IsValidForFirstLetter();
+    case ValidPropertyFilter::kCue:
+      return CSSProperty::Get(property).IsValidForCue();
+    case ValidPropertyFilter::kMarker:
+      return CSSProperty::Get(property).IsValidForMarker();
+  }
+  NOTREACHED();
+  return true;
+}
+
 template <CSSPropertyPriority priority>
 void StyleResolver::ApplyAnimatedStandardProperties(
     StyleResolverState& state,
@@ -1469,6 +1488,10 @@ void StyleResolver::ApplyAnimatedStandardProperties(
         entry.key.GetCSSProperty().IsAffectedByForcedColors() &&
         state.Style()->ForcedColorAdjust() != EForcedColorAdjust::kNone)
       continue;
+    if (state.Style()->StyleType() == kPseudoIdMarker &&
+        !PassesPropertyFilter(ValidPropertyFilter::kMarker, property,
+                              state.GetDocument()))
+      continue;
     const Interpolation& interpolation = *entry.value.front();
     if (IsA<InvalidatableInterpolation>(interpolation)) {
       CSSInterpolationTypesMap map(state.GetDocument().GetPropertyRegistry(),
@@ -1481,23 +1504,6 @@ void StyleResolver::ApplyAnimatedStandardProperties(
   }
 }
 
-static bool PassesPropertyFilter(ValidPropertyFilter valid_property_filter,
-                                 CSSPropertyID property,
-                                 const Document& document) {
-  switch (valid_property_filter) {
-    case ValidPropertyFilter::kNoFilter:
-      return true;
-    case ValidPropertyFilter::kFirstLetter:
-      return CSSProperty::Get(property).IsValidForFirstLetter();
-    case ValidPropertyFilter::kCue:
-      return CSSProperty::Get(property).IsValidForCue();
-    case ValidPropertyFilter::kMarker:
-      return CSSProperty::Get(property).IsValidForMarker();
-  }
-  NOTREACHED();
-  return true;
-}
-
 static inline void ApplyProperty(const CSSProperty& property,
                                  StyleResolverState& state,
                                  const CSSValue& value,

third_party/blink/web_tests/TestExpectations

@@ -1784,8 +1784,6 @@ crbug.com/1012289 external/wpt/css/css-lists/list-style-type-string-005b.html [
 crbug.com/995106 external/wpt/css/css-pseudo/first-letter-exclude-inline-marker.html [ Failure ]
 crbug.com/995106 external/wpt/css/css-pseudo/first-letter-exclude-inline-child-marker.html [ Failure ]
 
-crbug.com/1054509 external/wpt/css/css-transitions/non-rendered-element-004.tentative.html [ Skip ]
-
 crbug.com/1058822 virtual/dark-color-scheme/external/wpt/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-alpha.html [ Failure ]
 crbug.com/1058822 virtual/dark-color-scheme/external/wpt/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque.html [ Failure ]
 
@@ -3285,7 +3283,6 @@ crbug.com/626703 external/wpt/css/css-sizing/image-min-max-content-intrinsic-siz
 crbug.com/626703 external/wpt/css/css-lists/li-list-item-counter.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-sizing/image-min-max-content-intrinsic-size-change-006.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-sizing/image-min-max-content-intrinsic-size-change-004.html [ Failure ]
-crbug.com/626703 virtual/threaded/external/wpt/css/css-animations/animationevent-marker-pseudoelement.html [ Timeout ]
 crbug.com/626703 external/wpt/css/css-sizing/image-min-max-content-intrinsic-size-change-007.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-lists/counter-set-001.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-text/text-transform/text-transform-multiple-001.html [ Failure ]

third_party/blink/web_tests/WPTOverrideExpectations

@@ -216,7 +216,6 @@ external/wpt/css/css-animations/CSSAnimation-pausing.tentative.html [ Failure Pa
 external/wpt/css/css-animations/CSSAnimation-ready.tentative.html [ Failure Pass ]
 external/wpt/css/css-animations/CSSPseudoElement-getAnimations.tentative.html [ Failure ]
 external/wpt/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html [ Failure Pass ] # wpt_subtest_failure
-external/wpt/css/css-animations/animationevent-marker-pseudoelement.html [ Timeout ] # wpt_subtest_failure
 external/wpt/css/css-animations/event-dispatch.tentative.html [ Pass Timeout ] # wpt_subtest_failure
 external/wpt/css/css-backgrounds/background-size/vector/background-size-vector-024.html [ Pass Failure ]
 external/wpt/css/css-box/parsing/min-height-invalid.html [ Failure ]

third_party/blink/web_tests/android/ClankWPTOverrideExpectations

@@ -475,7 +475,6 @@ crbug.com/1050754 external/wpt/css/css-align/animation/row-gap-interpolation.htm
 crbug.com/1050754 external/wpt/css/css-animations/animation-before-initial-box-construction-001.html [ Failure ]
 crbug.com/1050754 external/wpt/css/css-animations/AnimationEffect-getComputedTiming.tentative.html [ Failure ]
 crbug.com/1050754 external/wpt/css/css-animations/AnimationEffect-updateTiming.tentative.html [ Failure ]
-crbug.com/1050754 external/wpt/css/css-animations/animationevent-marker-pseudoelement.html [ Timeout ]
 crbug.com/1050754 external/wpt/css/css-animations/CSSAnimation-animationName.tentative.html [ Failure ]
 crbug.com/1050754 external/wpt/css/css-animations/CSSAnimation-canceling.tentative.html [ Failure ]
 crbug.com/1050754 external/wpt/css/css-animations/CSSAnimation-compositeOrder.tentative.html [ Failure ]

third_party/blink/web_tests/android/WeblayerWPTOverrideExpectations

@@ -371,7 +371,6 @@ crbug.com/1050754 external/wpt/credential-management/passwordcredential-framed-g
 crbug.com/1050754 external/wpt/css/compositing/mix-blend-mode/mix-blend-mode-creates-stacking-context.html [ Failure ]
 crbug.com/1050754 external/wpt/css/compositing/parsing/background-blend-mode-computed.html [ Failure ]
 crbug.com/1050754 external/wpt/css/css-animations/AnimationEffect-updateTiming.tentative.html [ Failure ]
-crbug.com/1050754 external/wpt/css/css-animations/animationevent-marker-pseudoelement.html [ Timeout ]
 crbug.com/1050754 external/wpt/css/css-animations/CSSAnimation-compositeOrder.tentative.html [ Failure ]
 crbug.com/1050754 external/wpt/css/css-animations/CSSAnimation-effect.tentative.html [ Timeout ]
 crbug.com/1050754 external/wpt/css/css-animations/CSSAnimation-ready.tentative.html [ Failure ]

third_party/blink/web_tests/android/WebviewWPTOverrideExpectations

@@ -507,7 +507,6 @@ external/wpt/css/css-align/animation/row-gap-interpolation.html [ Failure ]
 external/wpt/css/css-animations/animation-before-initial-box-construction-001.html [ Failure ]
 external/wpt/css/css-animations/AnimationEffect-getComputedTiming.tentative.html [ Failure ]
 external/wpt/css/css-animations/AnimationEffect-updateTiming.tentative.html [ Failure ]
-external/wpt/css/css-animations/animationevent-marker-pseudoelement.html [ Timeout ]
 external/wpt/css/css-animations/CSSAnimation-animationName.tentative.html [ Failure ]
 external/wpt/css/css-animations/CSSAnimation-canceling.tentative.html [ Failure ]
 external/wpt/css/css-animations/CSSAnimation-compositeOrder.tentative.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-animations/Document-getAnimations.tentative-expected.txt

@@ -14,6 +14,6 @@ PASS Yet-to-start CSS Animations are returned
 PASS CSS Animations canceled via the API are not returned
 PASS CSS Animations canceled and restarted via the API are returned
 PASS CSS Animations targetting (pseudo-)elements should have correct order after sorting
-FAIL CSS Animations targetting (pseudo-)elements should have correct order after sorting (::marker) assert_equals: CSS animations on both pseudo-elements and elements are returned expected 5 but got 4
+PASS CSS Animations targetting (pseudo-)elements should have correct order after sorting (::marker)
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/css/css-animations/event-order.tentative-expected.txt

 This is a testharness.js-based test.
 PASS Same events are ordered by elements
 PASS Same events on pseudo-elements follow the prescribed order
-FAIL Same events on pseudo-elements follow the prescribed order (::marker) assert_equals: Number of events received (4) should match expected number (5) (expected: animationstart, animationstart, animationstart, animationstart, animationstart, actual: animationstart, animationstart, animationstart, animationstart) expected 5 but got 4
+PASS Same events on pseudo-elements follow the prescribed order (::marker)
 FAIL Start and iteration events are ordered by time assert_equals: Event #1 types should match (expected: animationiteration, animationstart, actual: animationstart, animationiteration) expected "animationiteration" but got "animationstart"
 FAIL Iteration and end events are ordered by time assert_equals: Event #1 types should match (expected: animationiteration, animationend, actual: animationend, animationiteration) expected "animationiteration" but got "animationend"
 FAIL Start and end events are sorted correctly when fired simultaneously assert_equals: Event #1 targets should match expected Element node <div style="animation: anim 100s 2"></div> but got Element node <div style="animation: anim 100s 100s"></div>

third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-expected.txt

@@ -21,6 +21,20 @@ PASS Property text-combine-upright value 'all' in ::marker
 PASS Property unicode-bidi value 'plaintext' in ::marker
 PASS Property direction value 'rtl' in ::marker
 PASS Property content value '"foo"' in ::marker
+PASS Property animation value '1s linear 2s infinite alternate forwards paused anim' in ::marker
+PASS Property animation-delay value '1s' in ::marker
+PASS Property animation-direction value 'alternate' in ::marker
+PASS Property animation-duration value '2s' in ::marker
+PASS Property animation-fill-mode value 'forwards' in ::marker
+PASS Property animation-iteration-count value 'infinite' in ::marker
+PASS Property animation-name value 'anim' in ::marker
+PASS Property animation-play-state value 'paused' in ::marker
+PASS Property animation-timing-function value 'linear' in ::marker
+PASS Property transition value 'display 1s linear 2s' in ::marker
+PASS Property transition-delay value '1s' in ::marker
+PASS Property transition-duration value '2s' in ::marker
+PASS Property transition-property value 'display' in ::marker
+PASS Property transition-timing-function value 'linear' in ::marker
 PASS Property display value 'none' in ::marker
 PASS Property position value 'absolute' in ::marker
 PASS Property float value 'right' in ::marker

third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation-expected.txt

+This is a testharness.js-based test.
+Found 60 tests; 49 PASS, 11 FAIL, 0 TIMEOUT, 0 NOTRUN.
+FAIL Animation of font in ::marker assert_in_array: value "italic small-caps 500 ultra-expanded 15px Ahem" not in array ["italic small-caps 500 expanded 15px Ahem", "italic small-caps 500 expanded 15px/normal Ahem"]
+PASS Animation of font-family in ::marker
+PASS Animation of font-feature-settings in ::marker
+PASS Animation of font-kerning in ::marker
+PASS Animation of font-size in ::marker
+PASS Animation of font-size-adjust in ::marker
+FAIL Animation of font-stretch in ::marker assert_in_array: value "200%" not in array ["expanded", "125%"]
+PASS Animation of font-style in ::marker
+FAIL Animation of font-synthesis in ::marker assert_true: font-synthesis doesn't seem to be supported in the computed style expected true got false
+PASS Animation of font-variant in ::marker
+PASS Animation of font-variant-caps in ::marker
+PASS Animation of font-variant-east-asian in ::marker
+PASS Animation of font-variant-ligatures in ::marker
+PASS Animation of font-variant-numeric in ::marker
+FAIL Animation of font-variant-position in ::marker assert_true: font-variant-position doesn't seem to be supported in the computed style expected true got false
+PASS Animation of font-weight in ::marker
+FAIL Animation of white-space in ::marker assert_equals: expected "nowrap" but got "pre"
+PASS Animation of color in ::marker
+FAIL Animation of text-combine-upright in ::marker assert_equals: expected "none" but got "all"
+PASS Animation of unicode-bidi in ::marker
+PASS Animation of direction in ::marker
+PASS Animation of content in ::marker
+PASS Animation of display in ::marker
+PASS Animation of position in ::marker
+PASS Animation of float in ::marker
+PASS Animation of list-style in ::marker
+PASS Animation of list-style-image in ::marker
+PASS Animation of list-style-position in ::marker
+PASS Animation of list-style-type in ::marker
+PASS Animation of line-height in ::marker
+FAIL Transition of font in ::marker assert_in_array: value "italic small-caps 500 ultra-expanded 15px Ahem" not in array ["italic small-caps 500 expanded 15px Ahem", "italic small-caps 500 expanded 15px/normal Ahem"]
+PASS Transition of font-family in ::marker
+PASS Transition of font-feature-settings in ::marker
+PASS Transition of font-kerning in ::marker
+PASS Transition of font-size in ::marker
+PASS Transition of font-size-adjust in ::marker
+FAIL Transition of font-stretch in ::marker assert_in_array: value "200%" not in array ["expanded", "125%"]
+PASS Transition of font-style in ::marker
+FAIL Transition of font-synthesis in ::marker assert_true: font-synthesis doesn't seem to be supported in the computed style expected true got false
+PASS Transition of font-variant in ::marker
+PASS Transition of font-variant-caps in ::marker
+PASS Transition of font-variant-east-asian in ::marker
+PASS Transition of font-variant-ligatures in ::marker
+PASS Transition of font-variant-numeric in ::marker
+FAIL Transition of font-variant-position in ::marker assert_true: font-variant-position doesn't seem to be supported in the computed style expected true got false
+PASS Transition of font-weight in ::marker
+FAIL Transition of white-space in ::marker assert_equals: expected "nowrap" but got "pre"
+PASS Transition of color in ::marker
+PASS Transition of text-combine-upright in ::marker
+PASS Transition of unicode-bidi in ::marker
+PASS Transition of direction in ::marker
+PASS Transition of content in ::marker
+PASS Transition of display in ::marker
+PASS Transition of position in ::marker
+PASS Transition of float in ::marker
+PASS Transition of list-style in ::marker
+PASS Transition of list-style-image in ::marker
+PASS Transition of list-style-position in ::marker
+PASS Transition of list-style-type in ::marker
+PASS Transition of line-height in ::marker
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties-in-animation.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Supported properties in ::marker animations</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
+<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
+<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transitions">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks ::marker supports animations and transitions, but only for the properties that apply to ::marker." />
+<style id="style"></style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<ul>
+  <li id="target">target</li>
+</ul>
+<script>
+const interpolationTests = [
+  // ::marker supports all font properties.
+  {
+    property: "font",
+    from: "oblique normal 100 ultra-condensed 5px / 20px serif",
+    to: "italic small-caps 900 ultra-expanded 25px / 50px Ahem",
+    midPoint: ["italic small-caps 500 expanded 15px Ahem", "italic small-caps 500 expanded 15px/normal Ahem"],
+  },
+  {
+    property: "font-family",
+    from: "serif",
+    to: "Ahem",
+    midPoint: "Ahem",
+  },
+  {
+    property: "font-feature-settings",
+    from: "'c2sc'",
+    to: "'smcp'",
+    midPoint: "\"smcp\"",
+  },
+  {
+    property: "font-kerning",
+    from: "normal",
+    to: "none",
+    midPoint: "none",
+  },
+  {
+    property: "font-size",
+    from: "5px",
+    to: "25px",
+    midPoint: "15px",
+  },
+  {
+    property: "font-size-adjust",
+    from: "1",
+    to: "3",
+    midPoint: "2",
+  },
+  {
+    property: "font-stretch",
+    from: "ultra-condensed",
+    to: "ultra-expanded",
+    midPoint: ["expanded", "125%"],
+  },
+  {
+    property: "font-style",
+    from: "oblique",
+    to: "italic",
+    midPoint: "italic",
+  },
+  {
+    property: "font-synthesis",
+    from: "weight",
+    to: "none",
+    midPoint: "none",
+  },
+  {
+    property: "font-variant",
+    from: "unicase",
+    to: "small-caps",
+    midPoint: "small-caps",
+  },
+  {
+    property: "font-variant-caps",
+    from: "unicase",
+    to: "small-caps",
+    midPoint: "small-caps",
+  },
+  {
+    property: "font-variant-east-asian",
+    from: "proportional-width",
+    to: "full-width",
+    midPoint: "full-width",
+  },
+  {
+    property: "font-variant-ligatures",
+    from: "no-historical-ligatures",
+    to: "historical-ligatures",
+    midPoint: "historical-ligatures",
+  },
+  {
+    property: "font-variant-numeric",
+    from: "ordinal",
+    to: "slashed-zero",
+    midPoint: "slashed-zero",
+  },
+  {
+    property: "font-variant-position",
+    from: "super",
+    to: "sub",
+    midPoint: "sub",
+  },
+  {
+    property: "font-weight",
+    from: "100",
+    to: "900",
+    midPoint: "500",
+  },
+
+  // ::marker supports `white-space`
+  {
+    property: "white-space",
+    from: "pre-line",
+    to: "nowrap",
+    midPoint: "nowrap",
+  },
+
+  // ::marker supports `color`
+  {
+    property: "color",
+    from: "rgb(0, 100, 200)",
+    to: "rgb(100, 200, 0)",
+    midPoint: "rgb(50, 150, 100)",
+  },
+
+  // ::marker supports `text-combine-upright`, `unicode-bidi` and `direction`,
+  // but they are not animatable.
+  {
+    property: "text-combine-upright",
+    from: "all",
+    to: "all",
+    midPoint: null,
+  },
+  {
+    property: "unicode-bidi",
+    from: "embed",
+    to: "plaintext",
+    midPoint: null,
+  },
+  {
+    property: "direction",
+    from: "rtl",
+    to: "rtl",
+    midPoint: null,
+  },
+
+  // ::marker supports `content`
+  {
+    property: "content",
+    from: "'foo'",
+    to: "'bar'",
+    midPoint: "\"bar\"",
+  },
+
+  // ::marker does NOT support layout properties
+  {
+    property: "display",
+    from: "flex",
+    to: "none",
+    midPoint: ["block", "inline", "inline-block"],
+  },
+  {
+    property: "position",
+    from: "fixed",
+    to: "absolute",
+    midPoint: "static",
+  },
+  {
+    property: "float",
+    from: "left",
+    to: "right",
+    midPoint: "none",
+  },
+
+  // ::marker does NOT support list properties despite being affected by them,
+  // they apply to the list item instead.
+  {
+    property: "list-style",
+    from: "inside url('foo') square",
+    to: "inside url('bar') decimal",
+    midPoint: "outside none disc",
+  },
+  {
+    property: "list-style-image",
+    from: "url('foo')",
+    to: "url('bar')",
+    midPoint: "none",
+  },
+  {
+    property: "list-style-position",
+    from: "inside",
+    to: "inside",
+    midPoint: "outside",
+  },
+  {
+    property: "list-style-type",
+    from: "square",
+    to: "decimal",
+    midPoint: "disc",
+  },
+
+  // ::marker does NOT support `line-height` because, despite being a
+  // longhand of `font`, it's not a font property.
+  {
+    property: "line-height",
+    from: "20px",
+    to: "50px",
+    midPoint: "normal",
+  },
+];
+
+const target = document.getElementById("target");
+const styleElement = document.getElementById("style");
+const markerStyle = getComputedStyle(target, "::marker");
+
+function check({property, from, to, midPoint}) {
+  assert_true(property in markerStyle, property + " doesn't seem to be supported in the computed style");
+  assert_true(CSS.supports(property, from), `'${from}' is a supported value for ${property}.`);
+  assert_true(CSS.supports(property, to), `'${to}' is a supported value for ${property}.`);
+  const computed = markerStyle.getPropertyValue(property);
+  if (Array.isArray(midPoint)) {
+    assert_in_array(computed, midPoint);
+  } else {
+    assert_equals(computed, midPoint);
+  }
+}
+
+function testAnimations(interpolationTests) {
+  styleElement.textContent = `
+    ::marker {
+      animation: anim 2s -1s paused linear;
+    }
+    @keyframes anim {
+      from {}
+      to {}
+    }
+  `;
+  const keyframes = styleElement.sheet.cssRules[1];
+  const fromStyle = keyframes.cssRules[0].style;
+  const toStyle = keyframes.cssRules[1].style;
+  for (let {property, from, to, midPoint} of interpolationTests) {
+    fromStyle.cssText = "";
+    toStyle.cssText = "";
+    if (midPoint == null) {
+      midPoint = markerStyle.getPropertyValue(property);
+    }
+    fromStyle.setProperty(property, from);
+    toStyle.setProperty(property, to);
+    test(() => {
+      check({property, from, to, midPoint});
+    }, `Animation of ${property} in ::marker`);
+  }
+}
+
+function testTransitions(interpolationTests) {
+  styleElement.textContent = `
+    .transition::marker {
+      transition: all 2s -1s linear;
+    }
+    .from::marker {}
+    .to::marker {}
+  `;
+  const fromStyle = styleElement.sheet.cssRules[1].style;
+  const toStyle = styleElement.sheet.cssRules[2].style;
+  for (let {property, from, to, midPoint} of interpolationTests) {
+    fromStyle.cssText = "";
+    toStyle.cssText = "";
+    if (midPoint == null) {
+      midPoint = to;
+    }
+    fromStyle.setProperty(property, from);
+    toStyle.setProperty(property, to);
+    target.className = "from";
+    markerStyle.width;
+    target.classList.add("transition");
+    markerStyle.width;
+    target.classList.add("to");
+    test(() => {
+      check({property, from, to, midPoint});
+    }, `Transition of ${property} in ::marker`);
+  }
+}
+
+testAnimations(interpolationTests);
+testTransitions(interpolationTests);
+</script>

third_party/blink/web_tests/external/wpt/css/css-pseudo/parsing/marker-supported-properties.html

@@ -45,6 +45,24 @@ test_pseudo_computed_value("::marker", "direction", "rtl");
 // ::marker supports `content`
 test_pseudo_computed_value("::marker", "content", "\"foo\"");
 
+// ::marker supports animation properties.
+test_pseudo_computed_value("::marker", "animation", "1s linear 2s infinite alternate forwards paused anim");
+test_pseudo_computed_value("::marker", "animation-delay", "1s");
+test_pseudo_computed_value("::marker", "animation-direction", "alternate");
+test_pseudo_computed_value("::marker", "animation-duration", "2s");
+test_pseudo_computed_value("::marker", "animation-fill-mode", "forwards");
+test_pseudo_computed_value("::marker", "animation-iteration-count", "infinite");
+test_pseudo_computed_value("::marker", "animation-name", "anim");
+test_pseudo_computed_value("::marker", "animation-play-state", "paused");
+test_pseudo_computed_value("::marker", "animation-timing-function", "linear");
+
+// ::marker supports transition properties.
+test_pseudo_computed_value("::marker", "transition", "display 1s linear 2s");
+test_pseudo_computed_value("::marker", "transition-delay", "1s");
+test_pseudo_computed_value("::marker", "transition-duration", "2s");
+test_pseudo_computed_value("::marker", "transition-property", "display");
+test_pseudo_computed_value("::marker", "transition-timing-function", "linear");
+
 // ::marker does NOT support layout properties
 test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);
 test_pseudo_computed_value("::marker", "position", "absolute", "static");

third_party/blink/web_tests/external/wpt/css/css-transitions/Document-getAnimations.tentative-expected.txt

-This is a testharness.js-based test.
-PASS getAnimations for non-animated content
-PASS getAnimations for CSS Transitions
-PASS CSS Transitions targetting (pseudo-)elements should have correct order after sorting
-FAIL CSS Transitions targetting (pseudo-)elements should have correct order after sorting (::marker) assert_equals: CSS transition on both pseudo-elements and elements are returned expected 5 but got 4
-PASS Transitions are not returned after they have finished
-Harness: the test ran to completion.
-