1518795 - picture <source> element doesn't dynamically react to media changes if in a ShadowRoot

Status: VERIFIED FIXED

(Core :: DOM: Core & HTML, defect)

Description

[:glob ✱]

https://interactive-examples.mdn.mozilla.net/pages/tabbed/picture.html no longer works in firefox.

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

mozregression says:

10:15.33 INFO: Last good revision: 48a5d87cf9bdb59e39653ab331df04ea2a04267d
10:15.33 INFO: First bad revision: 20d536fd0f2a02bd4527044d367cf98bebbb358d
10:15.33 INFO: Pushlog: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=48a5d87cf9bdb59e39653ab331df04ea2a04267d&tochange=20d536fd0f2a02bd4527044d367cf98bebbb358d

which is bug 1460069.

Comment 2

[xxluke]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

Open a page containing a picture-tag using srcset, like the example from developer.mozilla.org: https://interactive-examples.mdn.mozilla.net/pages/tabbed/picture.html
It also happens in my Angular project which dynamically loads the page content.
It does not happen on static websites without JavaScript like this: http://jsfiddle.net/6od2qm5a/

Actual results:

The picture meant to be for a browsers wider than 800px is always displayed.

Expected results:

The image should switch when the browser is smaller than 800px.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

That example uses shadow dom if available. I'll take a look.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1518795 - Properly track responsive content in a connected ShadowRoot. r=edgar,smaug

Took more to write the test than the fix :)

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f0442a84c0d9
Properly track responsive content in a connected ShadowRoot. r=smaug

Comment 6

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14780 for changes under testing/web-platform/tests

Comment 7

[Olli Pettay [:smaug][[e-mail]]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

Created attachment 9035333 [details]
Bug 1518795 - Properly track responsive content in a connected ShadowRoot.
r=edgar,smaug

Took more to write the test than the fix :)

Isn't that almost always the case.

Comment 8

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/f0442a84c0d9

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9035333 [details]
Bug 1518795 - Properly track responsive content in a connected ShadowRoot. r=edgar,smaug

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: shadow DOM

User impact if declined: responsive images misbehave.

Is this code covered by automated tests?: Yes

Has the fix been verified in Nightly?: No

Needs manual test from QE?: Yes

If yes, steps to reproduce: See STR in comment 0.

List of other uplifts needed: none

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Simple fix to check the right document. Should be pretty straight-forward and not affect at all non-shadow-DOM content.

String changes made/needed: none

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9035333 [details]
Bug 1518795 - Properly track responsive content in a connected ShadowRoot. r=edgar,smaug

[Triage Comment]
Fixes a bug with responsive image misbehavior in Shadow DOM. Approved for 65.0b10.

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/87b11c0f4ff5

Comment 12

[Emil Ghitta, QA [:emilghitta]]

This issue is verified fixed using Firefox 65.0b10 (BuildId:20190110221328) and Firefox 66.0a1 (BuildId:20190110214210) on Windows 10 64bit, macOS 10.13.6 and Ubuntu 16.04 64bit.