matchMedia late by 1px compared to CSS media query

• Component: CSS
• Status: ASSIGNED ---

[iyel]

@media (min-width: 720px) and (max-width: 989px) {
    #css {
        background-color: orange;
    }
}

window.matchMedia('(min-width: 720px) and (max-width: 989px)').addListener( ... );

At 720px background color will become orange, and only at 721px MediaQueryList will fire an event notifying that breakpoint changed

[iyel]

Same in reverse order 
@media (min-width: 480px) and (max-width: 719px) {
    #css {
        background-color: orangered;
    }
}

Going from >720px down, on 719px color will be orangered and on 718 event will be fired

[Radar WebKit Bug Importer]

<rdar://problem/26672916>

[zalan]

Created attachment 280874 [details]
Test reduction

1. Size the window to 1001px
2. Open console (web inspector)
3. Resize the window below 1000px pixel by pixel.
4. Orange box disappears when window size is < 1000px
Expected result: console prints the window.innerWidth the same time when the orange box disappears
Actual result: console prints the window.innerWidth value soon after the window is resized again.

[zalan]

Created attachment 280875 [details]
Test reduction

Expected result: "PASS if this...." text should show up the same time when the orange background disappears.

[zalan]

It probably got regressed at r152568 where we started calling styleResolverChanged with  DeferRecalcStyle.
Now we call evaluateMediaQueryList() at the next layout -> matchMedia and mediaQuery are out of sync.

[Ahmad Saleem]

I am not able to reproduce this bug in Safari Technology Preview 152 and when I resize window and orange box disappear, I get text "PASS..." similar to mentioned in Comment 04 and it works similar to other browser (Chrome Canary 107 and Firefox Nightly 106).

Just want to share updated testing results. Appreciate if someone can confirm, I am testing correctly and mark it accordingly. Thanks!