1776422 - `linear(...)` easing: Highlight for `linear(...)` animated div does not match the actual div

Status: RESOLVED INVALID

(DevTools :: Inspector, defect)

Description

[David Shin[:dshin]]

STR:

1. Enable about:config pref layout.css.linear-easing-function.enabled
2. Navigate to https://ffx-devtools-linear-animation-timing-function.glitch.me/
3. Launch inspector
4. Select the div with linear(...) animation enabled with id linear
5. Click the square button beside the .linear style (Highlight all elements matching this selector)

Expected Behaviour: Highlight overlaps the linear animated div at all times
Actual Behaviour: Highlight moves separately from the linear animated div. This is not the case for the cubic bezier div.

Comment 1

[Sebastian Zartner [:sebo]]

I tested this on Windows using Nightly 103.0a1 (2022-06-24) and it works perfectly for me. That means, the highlighting always covers the <div>.
So maybe that depends on the OS you're on?

Sebastian

Comment 2

[David Shin[:dshin]]

Ok... that was strange. Despite of flipping pref on/off having an impact, when it was on, the div behaved as if linear and not linear(...) was applied. When pref was off, it behaved as if ease was applied. Strangely enough, inspector was unaffected by this.
Launched a new profile & turned the pref on and did not observe the behaviour. Tried flipping the pref on and off again to no effect. Restarted the browser with the old profile, and the problem seems to have gone away.