1523627 - picture <source> element doesn't select the right source when in Angular app

Status: RESOLVED FIXED

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

Description

[xxluke]

I've created an empty, new Angular app with the example of the <picture>-Tag from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

The content of app.component.html is

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

The image should change when the browser is smaller than 800px but it doesn't in Firefox 65 while it works in other browsers.

Live example: https://angular-bxhc7x.stackblitz.io/
Live example source code: https://stackblitz.com/edit/angular-bxhc7x

It's very similar to bug 1518795 so I guess it has to do with shadow dom.

Comment 1

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Let's see if Emilio has thoughts here. :)

Comment 2

[Emilio Cobos Álvarez [:emilio]]

This is not using Shadow DOM, nor seems a regression (it's broken in 60 as well at least). Also, we get the image wrong even if we load the page with a small viewport to begin with.

I can take a look though.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

I don't see a reason for it not to select the right source.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Reduced test-case.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1523627 - HTMLSourceElement should keep track of its media list even if there's no image next-sibling yet.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Thanks for the report! The patch above should fix it :)

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/84a4caccdc97
HTMLSourceElement should keep track of its media list even if there's no image next-sibling yet. r=jdm

Comment 8

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/84a4caccdc97

Comment 9

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

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