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
WebKit · Apr 28, 2021 · b70d55af2a228821e2b430443e6196894a980e24 · b70d55a
1 parent 28bbd9d
commit b70d55af2a228821e2b430443e6196894a980e24
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 13 deletions.
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
@@ -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

diff --git a/...sts/html/semantics/embedded-content/the-img-element/source-media-outside-doc-expected.txt b/...sts/html/semantics/embedded-content/the-img-element/source-media-outside-doc-expected.txt
@@ -0,0 +1,4 @@
+
+
+PASS Image source selection using media queries is performed for img elements outside the document
+
diff --git a/...tform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html b/...tform-tests/html/semantics/embedded-content/the-img-element/source-media-outside-doc.html
@@ -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>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -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

diff --git a/Source/WebCore/html/HTMLImageElement.cpp b/Source/WebCore/html/HTMLImageElement.cpp
@@ -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;