Skip to content
Permalink
Browse files
Make img elements perform source selection even when not in the docum…
…ent.

https://bugs.webkit.org/show_bug.cgi?id=222801

Reviewed by Ryosuke Niwa.

LayoutTests/imported/w3c:

* web-platform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc-expected.txt: Added.
* web-platform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html: Added.

Source/WebCore:

The rules for image source selection in the HTML spec do not prevent
them from running when an <img> is not in the document.  So we update
HTMLImageElement to call selectImageSource() when inserted into and
removed from a <picture> without checking whether it's in a document.

Test: imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html

* html/HTMLImageElement.cpp:
(WebCore::HTMLImageElement::~HTMLImageElement): Remove useless call to
setPictureElement, since all it does is clear a weak pointer.
(WebCore::HTMLImageElement::insertedIntoAncestor):
(WebCore::HTMLImageElement::removedFromAncestor):


Canonical link: https://commits.webkit.org/237111@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@276697 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
heycam committed Apr 28, 2021
1 parent 28bbd9d commit b70d55af2a228821e2b430443e6196894a980e24
Showing 5 changed files with 87 additions and 13 deletions.
@@ -1,3 +1,13 @@
2021-04-28 Cameron McCormack <heycam@apple.com>

Make img elements perform source selection even when not in the document.
https://bugs.webkit.org/show_bug.cgi?id=222801

Reviewed by Ryosuke Niwa.

* web-platform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc-expected.txt: Added.
* web-platform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html: Added.

2021-04-27 Sergio Villar Senin <svillar@igalia.com>

[css-flexbox] Fix expectations of a WPT test that works fine
@@ -0,0 +1,4 @@


PASS Image source selection using media queries is performed for img elements outside the document

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<title>Image source selection using media queries is performed for img elements outside the document</title>
<link rel="help" href="https://html.spec.whatwg.org/#reacting-to-environment-changes">
<link rel="help" href="https://html.spec.whatwg.org/#reacting-to-dom-mutations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<iframe width="350" height="100" onload="async_test(this.contentWindow.run)" srcdoc="
<!DOCTYPE html>
<script>
const { assert_equals } = parent;
const iframe = parent.document.querySelector('iframe');
function run(t) {
const picture = document.createElement('picture');
const source1 = document.createElement('source');
source1.setAttribute('media', '(min-width: 300px)');
source1.setAttribute('srcset', 'data:,a');
picture.append(source1);
const source2 = document.createElement('source');
source2.setAttribute('media', '(min-width: 200px)');
source2.setAttribute('srcset', 'data:,b');
picture.append(source2);
const img = document.createElement('img');
img.src = 'data:,c';
picture.append(img);
queueMicrotask(t.step_func(function() {
assert_equals(img.currentSrc, 'data:,a', 'Initial currentSrc value');
matchMedia(source1.media).addEventListener(
'change',
function() {
queueMicrotask(t.step_func(function() {
assert_equals(img.currentSrc, 'data:,b', 'After MQ change');
img.remove();
queueMicrotask(t.step_func(function() {
assert_equals(img.currentSrc, 'data:,c', 'After removing img');
t.done();
}));
}));
},
{ once: true }
);
iframe.width = 250;
}));
}
</script>
"></iframe>
@@ -1,3 +1,23 @@
2021-04-28 Cameron McCormack <heycam@apple.com>

Make img elements perform source selection even when not in the document.
https://bugs.webkit.org/show_bug.cgi?id=222801

Reviewed by Ryosuke Niwa.

The rules for image source selection in the HTML spec do not prevent
them from running when an <img> is not in the document. So we update
HTMLImageElement to call selectImageSource() when inserted into and
removed from a <picture> without checking whether it's in a document.

Test: imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html

* html/HTMLImageElement.cpp:
(WebCore::HTMLImageElement::~HTMLImageElement): Remove useless call to
setPictureElement, since all it does is clear a weak pointer.
(WebCore::HTMLImageElement::insertedIntoAncestor):
(WebCore::HTMLImageElement::removedFromAncestor):

2021-04-28 Ian Gilbert <iang@apple.com>

Use a WeakHashSet for Document::m_mediaElements
@@ -94,7 +94,6 @@ HTMLImageElement::~HTMLImageElement()

if (m_form)
m_form->removeImgElement(this);
setPictureElement(nullptr);
}

Ref<HTMLImageElement> HTMLImageElement::createForLegacyFactoryFunction(Document& document, Optional<unsigned> width, Optional<unsigned> height)
@@ -386,16 +385,8 @@ Node::InsertedIntoAncestorResult HTMLImageElement::insertedIntoAncestor(Insertio
// FIXME: When the hack in HTMLConstructionSite::createHTMLElementOrFindCustomElementInterface to eagerly call setPictureElement is removed, we can just assert !pictureElement().
ASSERT(!pictureElement() || pictureElement() == &parentOfInsertedTree);
setPictureElement(&downcast<HTMLPictureElement>(parentOfInsertedTree));
// FIXME: We should unconditionally call selectImageSource so that source selection is performed even for <img> elements outside the document.
if (insertionType.connectedToDocument) {
selectImageSource(RelevantMutation::Yes);
return insertNotificationRequest;
}
auto candidate = bestFitSourceFromPictureElement();
if (!candidate.isEmpty()) {
setBestFitURLAndDPRFromImageCandidate(candidate);
m_imageLoader->updateFromElementIgnoringPreviousError(RelevantMutation::Yes);
}
selectImageSource(RelevantMutation::Yes);
return insertNotificationRequest;
}

// If we have been inserted from a renderer-less document,
@@ -417,8 +408,7 @@ void HTMLImageElement::removedFromAncestor(RemovalType removalType, ContainerNod
if (is<HTMLPictureElement>(oldParentOfRemovedTree) && !parentElement()) {
ASSERT(pictureElement() == &oldParentOfRemovedTree);
setPictureElement(nullptr);
// FIXME: We should call selectImageSource so that source selection is performed, now that we no longer have a <picture> context.
m_imageLoader->updateFromElementIgnoringPreviousError(RelevantMutation::Yes);
selectImageSource(RelevantMutation::Yes);
}

m_form = nullptr;

0 comments on commit b70d55a

Please sign in to comment.