Chrome · Animation
CVE-2026-118338
Cross Origin in Animation
Overview
Medium
Severity
—
CVSS
No
Exploited ITW
Fixed
Fix Status
Background
- `backdrop-filter` + `feDisplacementMap`
- A CSS
backdrop-filtercan reference an SVG filter whosefeDisplacementMapdisplaces pixels using a second input. Because the backdrop may contain cross-origin or private content and displacement output depends on the map’s pixels, the spec requiresfeDisplacementMapto pass through when fed a backdrop/tainted map (see CVE-2026-118312). - `ContainsBackdrop` flag
- Blink tracks a
contains_backdropbit through the filter-effect chain soFEDisplacementMapcan be forced to pass through for backdrop-derived inputs. - Composited animations path
- When a
filter/backdrop-filteris animated on the compositor, Blink buildsCompositorFilterOperationsfrom animation keyframes incompositor_animations.ccviaAddKeyframeToCurve→FilterEffectBuilder::BuildFilterOperations, a separate code path from the staticPaintLayerbuild. - `CompositorKeyframeValue` / `cc::KeyframedFilterAnimationCurve`
- Carry the per-keyframe filter operations lowered to
ccfor compositor-side animation.
Root Cause Analysis
This is a follow-up to CVE-2026-118312: the earlier CL added the contains_backdrop flag and forced FEDisplacementMap pass-through for backdrop filters, but it only covered the static paint path (PaintLayer). The composited-animation path was missed: AddKeyframeToCurve in third_party/blink/renderer/core/animation/compositor_animations.cc called FilterEffectBuilder::BuildFilterOperations(...Operations()) without the contains_backdrop argument, so animated backdrop-filter keyframes were built with contains_backdrop=false. Consequently, an animated backdrop-filter referencing an SVG feDisplacementMap was not forced to pass through and the backdrop content leak remained exploitable via the animation path. Despite the advisory’s “Use after free in Animation” label, the diff shows no freed-memory/lifetime sink — it is the same cross-origin / backdrop information disclosure as CVE-2026-118312, re-closed on the animation code path.
The fix adds a bool is_backdrop_filter parameter to AddKeyframeToCurve (and threads it through AddKeyframesToCurve), and passes it as the contains_backdrop argument to BuildFilterOperations. The caller computes it as css_property_id == CSSPropertyID::kBackdropFilter, so animated backdrop-filter keyframes now carry the backdrop flag and FEDisplacementMap pass-through is enforced during composited animation exactly as in the static case. The remaining (large) portion of the diff is test infrastructure: new WPT reference tests for animated backdrop filters, enabling the filter-effects/animation directory for the virtual/threaded suite, and a TestExpectations/VirtualTestSuites/WEB_FEATURES.yml bookkeeping update — none of which is a memory-safety fix.
Key insight
The backdrop-filter
feDisplacementMap pass-through was enforced on the static paint path but not when the backdrop-filter was animated on the compositor; AddKeyframeToCurve built the keyframe filter with contains_backdrop=false, so animating a backdrop filter re-opened the same cross-origin backdrop leak.Attack Path
- Compose the leak Attacker page places sensitive cross-origin/private content as the backdrop behind a target element. (web-reachable)
- Animate a backdrop-filter
Apply an animated
backdrop-filter(CSS keyframe animation) referencing an SVG filter containingfeDisplacementMapfed by the backdrop. - Hit the missed path
Because the animation runs on the compositor, keyframes go through
AddKeyframeToCurve, which (pre-patch) builds them withcontains_backdrop=false, so the displacement filter does not pass through. - Observe output/timing The displacement depends on backdrop pixels; the attacker uses timing/observable rendering to infer backdrop content. (timing-oracle step inferred)
- Primitive Recovery of cross-origin / private backdrop pixel data via the animated filter path — cross-origin information disclosure.
Impact Assessment
Renderer (with compositor involvement), no special privilege; reachable from untrusted web content that animates a
backdrop-filter referencing feDisplacementMap. The capability gained is cross-origin / sensitive information disclosure of backdrop content through a timing/output side channel — identical in nature to CVE-2026-118312, not a use-after-free and not memory corruption, so the advisory’s “Use after free in Animation” is not substantiated by this diff. Gated on the victim content being renderable as a backdrop and a practical oracle. The fix simply extends the existing pass-through enforcement to the composited-animation keyframe build.Files Changed
third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-saturate-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-hue-rotate-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-hue-rotate.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-sepia.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-combined-001.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-invert.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-opacity-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-combined-001-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-opacity.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-drop-shadow-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-hue-rotate-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-contrast.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-saturate-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-invert-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-drop-shadow.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-grayscale.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-brightness-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-invert.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-grayscale.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-invert-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-brightness.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-blur-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-drop-shadow-ref.htmlthird_party/blink/web_tests/TestExpectationsthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-contrast-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-sepia.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-opacity.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-displacement.htmlthird_party/blink/web_tests/VirtualTestSuitesthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.ymlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-grayscale-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-sepia-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-saturate.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-blur.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-drop-shadow.htmlthird_party/blink/renderer/core/animation/compositor_animations.ccthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-contrast.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-saturate.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-contrast-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-grayscale-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-sepia-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-opacity-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-filters-animation-hue-rotate.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.ymlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-displacement-ref.htmlthird_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html
Audit Directions
- Every filter build pathEnumerate all callers of
FilterEffectBuilder::BuildFilterOperations/BuildReferenceFilterand confirm each setscontains_backdropcorrectly for backdrop-filter inputs (static paint, composited animation, canvas, worklets). - Property-dependent flags in animation loweringAudit
compositor_animations.ccfor other per-property security flags (origin taint, backdrop) that must be propagated from the CSS property id into compositor keyframes. - Spec pass-through invariantsVerify
FEDisplacementMap(and similar data-dependent primitives) are forced to pass through on all build paths, not just the one most recently patched.
Patch
From e0cb253a6f794a3cb0c15a2bbd69150ce7d2b7c1 Mon Sep 17 00:00:00 2001 From: Stephen Chenney <[email protected]> Date: Wed, 21 Oct 2026 16:37:30 -0700 Subject: [PATCH] Disable FEDisplacementMap for animated CSS backdrop-filter The composited animations code path was missed in the earlier CL to disable FEDisplacementMap for backdrop-filter. Fix the oversight. Also move some animated filter effects WPT tests into the existing animations directly, and enable that directory for the virtual/threaded test suite so that we have coverage for composited filter animations. Bug: 575826638 Change-Id: I9b51a04945103b0913dbb1aae7acb9ddabef3747 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8624807 Reviewed-by: Stefan Zager <[email protected]> Commit-Queue: Stephen Chenney <[email protected]> Cr-Commit-Position: refs/heads/main@{#1724266} --- diff --git a/third_party/blink/renderer/core/animation/compositor_animations.cc b/third_party/blink/renderer/core/animation/compositor_animations.cc index 0679a0e8..797773d 100644 --- a/third_party/blink/renderer/core/animation/compositor_animations.cc +++ b/third_party/blink/renderer/core/animation/compositor_animations.cc @@ -877,11 +877,13 @@ void AddKeyframeToCurve(cc::KeyframedFilterAnimationCurve& curve, Keyframe::PropertySpecificKeyframe* keyframe, const CompositorKeyframeValue* value, - const TimingFunction& keyframe_timing_function) { + const TimingFunction& keyframe_timing_function, + bool is_backdrop_filter) { FilterEffectBuilder builder(gfx::RectF(), std::nullopt, 1, Color::kBlack, mojom::blink::ColorScheme::kLight); CompositorFilterOperations operations = builder.BuildFilterOperations( - To<CompositorKeyframeFilterOperations>(value)->Operations()); + To<CompositorKeyframeFilterOperations>(value)->Operations(), + is_backdrop_filter); std::unique_ptr<cc::FilterKeyframe> filter_keyframe = cc::FilterKeyframe::Create(base::Seconds(keyframe->Offset()), operations.ReleaseCcFilterOperations(), @@ -1019,7 +1021,8 @@ case CSSPropertyID::kFilter: case CSSPropertyID::kBackdropFilter: { auto filter_curve = cc::KeyframedFilterAnimationCurve::Create(); - AddKeyframesToCurve(*filter_curve, values); + AddKeyframesToCurve(*filter_curve, values, + css_property_id == CSSPropertyID::kBackdropFilter); filter_curve->SetTimingFunction(timing.timing_function->CloneToCC()); filter_curve->set_scaled_duration(scale); curve = std::move(filter_curve); diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations index eb856c8..b183a9d 100644 --- a/third_party/blink/web_tests/TestExpectations +++ b/third_party/blink/web_tests/TestExpectations @@ -579,6 +579,9 @@ crbug.com/386610909 external/wpt/svg/styling/use-element-non-rendered-has-selector.html [ Failure ] crbug.com/386610909 external/wpt/svg/styling/use-element-non-rendered-sibling-selector.html [ Failure ] +# Something broken in zoom for compositor animation of SVG filter +crbug.com/576324619 virtual/scalefactor200/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-displacement.html [ Failure ] + ### ====== Paint team owned tests to here ====== ### ====== Payments related tests begin ======= diff --git a/third_party/blink/web_tests/VirtualTestSuites b/third_party/blink/web_tests/VirtualTestSuites index db102c7..dff29b21 100644 --- a/third_party/blink/web_tests/VirtualTestSuites +++ b/third_party/blink/web_tests/VirtualTestSuites @@ -3493,6 +3493,7 @@ "external/wpt/css/css-overflow/scroll-markers/scroll-markers-updated-by-programmatic-scroll.html", "external/wpt/css/cssom-view/overflow-hidden-smooth-scroll-crash.html", "external/wpt/css/cssom-view/scroll-behavior-smooth-after-hiding-iframe.html", + "external/wpt/css/filter-effects/animation", "external/wpt/fetch/compression-dictionary/dictionary-fetch-timing-001.tentative.https.html", "external/wpt/fetch/compression-dictionary/dictionary-fetch-timing-002.tentative.https.html", "external/wpt/fetch/compression-dictionary/dictionary-fetch-with-link-element.tentative.https.html", diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml b/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml index 2bd31c7..c28d550 100644 --- a/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml @@ -1,11 +1,11 @@ rules: - backdrop-filter-*: [backdrop-filter] - backdrop-filters-*: [backdrop-filter] -- css-backdrop-filters-*: [backdrop-filter] - repaint-added-backdrop-filter.html: [backdrop-filter] - background-image-blur-repaint.html: [filter] - blur-*: [filter] - clip-under-filter-*: [filter] +- css-backdrop-filter-*: [backdrop-filter] - css-reference-large-svg-*: [filter] - css-filters-*: [filter] - drop-shadow-*: [filter] diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml index d36895c..986374de 100644 --- a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml @@ -1,3 +1,5 @@ rules: - backdrop-filter-*: [backdrop-filter] +- css-backdrop-filters-*: [backdrop-filter] - filter-*: [filter] +- css-filters-*: [filter] diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.html new file mode 100644 index 0000000..643d084 --- /dev/null +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Blur Reference</title> +<link rel="author" href="mailto:[email protected]"> +<style> + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: blue; + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + backdrop-filter: blur(10px); + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 75px; + left: 75px; + background: green; + } +</style> +<p>You should see a blurred rectangle with a green box.</p> +<div class="square"></div> +<div class="filt"> + <div class="greenbox"></div> +</div> diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.html new file mode 100644 index 0000000..0b3e429 --- /dev/null +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Blur</title> +<link rel="author" href="mailto:[email protected]"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="css-backdrop-filters-animation-blur-ref.html"> +<style> + @keyframes animate { + 0% { + backdrop-filter: blur(20px); + } + 100% { + backdrop-filter: none; + } + } + + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: blue; + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + animation-name: animate; + animation-play-state: paused; + animation-delay: -2s; + animation-duration: 4s; + animation-timing-function: linear; + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 75px; + left: 75px; + background: green; + } +</style> +<p>You should see a blurred rectangle with a green box.</p> +<div class="square"></div> +<div class="filt"> + <div class="greenbox"></div> +</div> diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html new file mode 100644 index 0000000..bf894ac --- /dev/null +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Brightness Reference</title> +<link rel="author" href="mailto:[email protected]"> +<style> + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: blue; + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + backdrop-filter: brightness(50%); + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 75px; + left: 75px; + background: green; + } +</style> +<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p> +<div class="square"></div> +<div class="filt"> + <div class="greenbox"></div> +</div> diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.html new file mode 100644 index 0000000..cdcd9b5 --- /dev/null +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Brightness</title> +<link rel="author" href="mailto:[email protected]"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="css-backdrop-filters-animation-brightness-ref.html"> +<style> + @keyframes animate { + 0% { + backdrop-filter: brightness(0%); + } + 100% { + backdrop-filter: none; + } + } + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: blue; + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + animation-name: animate; + animation-play-state: paused; + animation-delay: -2s; + animation-duration: 4s; + animation-timing-function: linear; + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 75px; + left: 75px; + background: green; + } +</style> +<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p> +<div class="square"></div> +<div class="filt"> + <div class="greenbox"></div> +</div> diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.html new file mode 100644 index 0000000..575c56d --- /dev/null +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Combined filters 001 Reference</title> +<link rel="author" href="mailto:[email protected]"> +<style> + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: black; + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + backdrop-filter: + blur(10px) + brightness(50%) + sepia(50%) + grayscale(50%) + saturate(50%) + hue-rotate(45deg) + invert(50%) + opacity(50%) + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 75px; + left: 75px; + background: green; + } +</style> +<p>You should see a gray blurred rectangle with a green box.</p> +<div class="square"></div> +<div class="filt"> + <div class="greenbox"></div> +</div> diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.html new file mode 100644 index 0000000..e8661cc --- /dev/null +++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Combined filters 001</title> +<link rel="author" href="mailto:[email protected]"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> +<link rel="match" href="css-backdrop-filters-animation-combined-ref.html"> +<style> + @keyframes animate { + 0% { + backdrop-filter: + blur(20px) + brightness(0%) + sepia(100%) + grayscale(100%) + saturate(0%) + hue-rotate(90deg) + invert(100%) + opacity(0%) + } + 100% { + backdrop-filter: none; + } + } + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: black; + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + animation-name: animate; + animation-play-state: paused; + animation-delay: -2s; + animation-duration: 4s; + animation-timing-function: linear; + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 75px; + left: 75px; + background: green; + } +</style> +<p>You should see a gray blurred rectangle with a green box.</p> + +<div class="square"></div> +<div class="filt"> ... (file diff truncated)
Loading diff…
Regression Test / PoC
shipped with the fix
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
index eb856c8..b183a9d 100644
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -579,6 +579,9 @@
crbug.com/386610909 external/wpt/svg/styling/use-element-non-rendered-has-selector.html [ Failure ]
crbug.com/386610909 external/wpt/svg/styling/use-element-non-rendered-sibling-selector.html [ Failure ]
+# Something broken in zoom for compositor animation of SVG filter
+crbug.com/576324619 virtual/scalefactor200/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-displacement.html [ Failure ]
+
### ====== Paint team owned tests to here ======
### ====== Payments related tests begin =======
diff --git a/third_party/blink/web_tests/VirtualTestSuites b/third_party/blink/web_tests/VirtualTestSuites
index db102c7..dff29b21 100644
--- a/third_party/blink/web_tests/VirtualTestSuites
+++ b/third_party/blink/web_tests/VirtualTestSuites
@@ -3493,6 +3493,7 @@
"external/wpt/css/css-overflow/scroll-markers/scroll-markers-updated-by-programmatic-scroll.html",
"external/wpt/css/cssom-view/overflow-hidden-smooth-scroll-crash.html",
"external/wpt/css/cssom-view/scroll-behavior-smooth-after-hiding-iframe.html",
+ "external/wpt/css/filter-effects/animation",
"external/wpt/fetch/compression-dictionary/dictionary-fetch-timing-001.tentative.https.html",
"external/wpt/fetch/compression-dictionary/dictionary-fetch-timing-002.tentative.https.html",
"external/wpt/fetch/compression-dictionary/dictionary-fetch-with-link-element.tentative.https.html",
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml b/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml
index 2bd31c7..c28d550 100644
--- a/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/WEB_FEATURES.yml
@@ -1,11 +1,11 @@
rules:
- backdrop-filter-*: [backdrop-filter]
- backdrop-filters-*: [backdrop-filter]
-- css-backdrop-filters-*: [backdrop-filter]
- repaint-added-backdrop-filter.html: [backdrop-filter]
- background-image-blur-repaint.html: [filter]
- blur-*: [filter]
- clip-under-filter-*: [filter]
+- css-backdrop-filter-*: [backdrop-filter]
- css-reference-large-svg-*: [filter]
- css-filters-*: [filter]
- drop-shadow-*: [filter]
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml
index d36895c..986374de 100644
--- a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/WEB_FEATURES.yml
@@ -1,3 +1,5 @@
rules:
- backdrop-filter-*: [backdrop-filter]
+- css-backdrop-filters-*: [backdrop-filter]
- filter-*: [filter]
+- css-filters-*: [filter]
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.html
new file mode 100644
index 0000000..643d084
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Blur Reference</title>
+<link rel="author" href="mailto:[email protected]">
+<style>
+ .square {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 100px;
+ left: 100px;
+ background: blue;
+ }
+ .filt {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 50px;
+ left: 50px;
+ backdrop-filter: blur(10px);
+ }
+ .greenbox {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ top: 75px;
+ left: 75px;
+ background: green;
+ }
+</style>
+<p>You should see a blurred rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+ <div class="greenbox"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.html
new file mode 100644
index 0000000..0b3e429
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-blur.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Blur</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-blur-ref.html">
+<style>
+ @keyframes animate {
+ 0% {
+ backdrop-filter: blur(20px);
+ }
+ 100% {
+ backdrop-filter: none;
+ }
+ }
+
+ .square {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 100px;
+ left: 100px;
+ background: blue;
+ }
+ .filt {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 50px;
+ left: 50px;
+ animation-name: animate;
+ animation-play-state: paused;
+ animation-delay: -2s;
+ animation-duration: 4s;
+ animation-timing-function: linear;
+ }
+ .greenbox {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ top: 75px;
+ left: 75px;
+ background: green;
+ }
+</style>
+<p>You should see a blurred rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+ <div class="greenbox"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html
new file mode 100644
index 0000000..bf894ac
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Brightness Reference</title>
+<link rel="author" href="mailto:[email protected]">
+<style>
+ .square {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 100px;
+ left: 100px;
+ background: blue;
+ }
+ .filt {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 50px;
+ left: 50px;
+ backdrop-filter: brightness(50%);
+ }
+ .greenbox {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ top: 75px;
+ left: 75px;
+ background: green;
+ }
+</style>
+<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+ <div class="greenbox"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.html
new file mode 100644
index 0000000..cdcd9b5
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-brightness.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Brightness</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-brightness-ref.html">
+<style>
+ @keyframes animate {
+ 0% {
+ backdrop-filter: brightness(0%);
+ }
+ 100% {
+ backdrop-filter: none;
+ }
+ }
+ .square {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 100px;
+ left: 100px;
+ background: blue;
+ }
+ .filt {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 50px;
+ left: 50px;
+ animation-name: animate;
+ animation-play-state: paused;
+ animation-delay: -2s;
+ animation-duration: 4s;
+ animation-timing-function: linear;
+ }
+ .greenbox {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ top: 75px;
+ left: 75px;
+ background: green;
+ }
+</style>
+<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+ <div class="greenbox"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.html
new file mode 100644
index 0000000..575c56d
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Combined filters 001 Reference</title>
+<link rel="author" href="mailto:[email protected]">
+<style>
+ .square {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 100px;
+ left: 100px;
+ background: black;
+ }
+ .filt {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 50px;
+ left: 50px;
+ backdrop-filter:
+ blur(10px)
+ brightness(50%)
+ sepia(50%)
+ grayscale(50%)
+ saturate(50%)
+ hue-rotate(45deg)
+ invert(50%)
+ opacity(50%)
+ }
+ .greenbox {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ top: 75px;
+ left: 75px;
+ background: green;
+ }
+</style>
+<p>You should see a gray blurred rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+ <div class="greenbox"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.html b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.html
new file mode 100644
index 0000000..e8661cc
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/filter-effects/animation/css-backdrop-filters-animation-combined.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Combined filters 001</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
... (truncated)
Loading diff…
Original Bug Report
The reporter's bug is still restricted on the tracker. Chrome de-restricts security bugs ~30–90 days after the fix ships; a later run will backfill it here.
References
On This Page