Skip to content
Permalink
Browse files
Images with loading="lazy" have uncontrollable gray border while loading
https://bugs.webkit.org/show_bug.cgi?id=243601

Reviewed by Darin Adler.

Do not paint border while an image is in deferred state.
The test image-loading-lazy-slow.html covers this. However, the current
test runner logic stops page loads before making a pixel snapshot, causing the
image to be painted as a broken image instead of the empty image at the
time of calling takeScreenshot. To fix this, postpone the stopping of page
loads and instead always stop page loads when reseting after the test.

Note that printing tests are not affected since they already made a pixel
snapshot before stopping the page loads.

* LayoutTests/TestExpectations:
* LayoutTests/platform/ios/TestExpectations:
* LayoutTests/platform/mac-wk1/TestExpectations:
* Source/WebCore/rendering/RenderImage.cpp:
(WebCore::RenderImage::paintReplaced):
* Tools/WebKitTestRunner/InjectedBundle/InjectedBundle.cpp:
(WTR::InjectedBundle::didReceiveMessageToPage):
(WTR::InjectedBundle::done):

Canonical link: https://commits.webkit.org/253960@main
  • Loading branch information
rwlbuis committed Aug 30, 2022
1 parent 96bb739 commit 7d844a4e948d225ba2f0504fa4a264b03bd9d8c8
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 7 deletions.
@@ -800,7 +800,6 @@ imported/w3c/web-platform-tests/html/rendering/widgets/the-select-element/option
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-iframe-element/iframe-modify-scrolling-attr-to-yes.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/adopt-from-image-document.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow-aspect-ratio.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/forms/the-option-element/dynamic-content-change-rendering.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/forms/the-selectmenu-element/selectmenu-option-arbitrary-content-displayed.tentative.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-popup-element/popup-hidden-display.tentative.html [ ImageOnlyFailure ]
@@ -1575,8 +1575,6 @@ fast/events/tabindex-focus-blur-all.html [ Failure ]

# Ref-test imported from W3C that is failing because type=image input elements have rounded corners on iOS.
imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/image01.html [ ImageOnlyFailure ]
# Ref-test imported form W3C that is failing because the test is off by a couple of pixels on iOS.
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow.html [ ImageOnlyFailure ]

webkit.org/b/204505 imported/w3c/web-platform-tests/css/css-multicol/multicol-rule-fraction-003.xht [ ImageOnlyFailure ]
webkit.org/b/204505 imported/w3c/web-platform-tests/css/css-multicol/multicol-rule-shorthand-2.xht [ ImageOnlyFailure ]
@@ -1182,7 +1182,6 @@ webkit.org/b/199242 [ Debug ] http/tests/performance/performance-resource-timing
imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/range-setattribute-value.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-display/display-none-inline-img.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/image-compositing-change.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-slow.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/rendering/replaced-elements/embedded-content/tall-cross-domain-iframe-in-scrolled.sub.html [ Skip ]

# <rdar://problem/42625657> REGRESSION (Mojave): 12 fast/images tests timing out on WK1
@@ -479,14 +479,17 @@ void RenderImage::paintReplaced(PaintInfo& paintInfo, const LayoutPoint& paintOf
float deviceScaleFactor = document().deviceScaleFactor();
LayoutUnit missingImageBorderWidth(1 / deviceScaleFactor);

if (isDeferredImage(element()))
return;

if (context.detectingContentfulPaint()) {
if (!context.contentfulPaintDetected() && !isDeferredImage(element()) && cachedImage() && cachedImage()->canRender(this, deviceScaleFactor) && !contentSize.isEmpty())
if (!context.contentfulPaintDetected() && cachedImage() && cachedImage()->canRender(this, deviceScaleFactor) && !contentSize.isEmpty())
context.setContentfulPaintDetected();

return;
}

if (!imageResource().cachedImage() || isDeferredImage(element()) || shouldDisplayBrokenImageIcon()) {
if (!imageResource().cachedImage() || shouldDisplayBrokenImageIcon()) {
if (paintInfo.phase == PaintPhase::Selection)
return;

@@ -219,6 +219,8 @@ void InjectedBundle::didReceiveMessageToPage(WKBundlePageRef page, WKStringRef m
m_state = Idle;
m_dumpPixels = false;
m_pixelResultIsPending = false;
// Needed for pixel result pending mode, otherwise a no-op.
InjectedBundle::page()->stopLoading();

setlocale(LC_ALL, "");
TestRunner::removeAllWebNotificationPermissions();
@@ -549,7 +551,10 @@ void InjectedBundle::done()

m_useWorkQueue = false;

page()->stopLoading();
// Postpone page load stop if pixel result is still pending since
// cancelled image loads will paint as broken images.
if (!m_pixelResultIsPending)
page()->stopLoading();
setTopLoadingFrame(0);

#if ENABLE(ACCESSIBILITY)

0 comments on commit 7d844a4

Please sign in to comment.