[Blink] Display images on a dark background

third_party/WebKit/Source/core/html/ImageDocument.cpp

 /*
  * Copyright (C) 2006, 2007, 2008, 2010 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 36 matching lines @@
 #include "core/layout/LayoutObject.h"
 #include "core/loader/DocumentLoader.h"
 #include "core/loader/FrameLoader.h"
 #include "core/loader/FrameLoaderClient.h"
 #include "platform/HostWindow.h"
 #include "wtf/text/StringBuilder.h"
 #include <limits>
 
 using namespace std;
 
+namespace {
+
+// The base square size is set to 10 because it rounds nicely for both the
+// minimum scale (0.1) and maximum scale (5.0).
+const int kBaseCheckerSize = 10;
+
+}  // namespace
+
 namespace blink {
 
 using namespace HTMLNames;
 
 class ImageEventListener : public EventListener {
  public:
   static ImageEventListener* create(ImageDocument* document) {
     return new ImageEventListener(document);
   }
   static const ImageEventListener* cast(const EventListener* listener) {
@@ skipping 49 matching lines @@
   result.append(" (");
   // FIXME: Localize numbers. Safari/OSX shows localized numbers with group
   // separaters. For example, "1,920x1,080".
   result.appendNumber(size.width());
   result.append(static_cast<UChar>(0xD7));  // U+00D7 (multiplication sign)
   result.appendNumber(size.height());
   result.append(')');
   return result.toString();
 }
 
+static LayoutSize cachedImageSize(HTMLImageElement* element) {
+  DCHECK(element->cachedImage());
+  return element->cachedImage()->imageSize(
+      LayoutObject::shouldRespectImageOrientation(element->layoutObject()),
+      1.0f);
+}
+
 void ImageDocumentParser::appendBytes(const char* data, size_t length) {
   if (!length)
     return;
 
   LocalFrame* frame = document()->frame();
   Settings* settings = frame->settings();
   if (!frame->loader().client()->allowImage(
           !settings || settings->imagesEnabled(), document()->url()))
     return;
 
@@ skipping 12 matching lines @@
 void ImageDocumentParser::finish() {
   if (!isStopped() && document()->imageElement() && document()->cachedImage()) {
     ImageResource* cachedImage = document()->cachedImage();
     DocumentLoader* loader = document()->loader();
     cachedImage->setResponse(loader->response());
     cachedImage->finish(loader->timing().responseEnd());
 
     // Report the natural image size in the page title, regardless of zoom
     // level.  At a zoom level of 1 the image is guaranteed to have an integer
     // size.
-    IntSize size = flooredIntSize(
-        cachedImage->imageSize(LayoutObject::shouldRespectImageOrientation(
-                                   document()->imageElement()->layoutObject()),
-                               1.0f));
+    IntSize size = flooredIntSize(cachedImageSize(document()->imageElement()));
     if (size.width()) {
       // Compute the title, we use the decoded filename of the resource, falling
       // back on the (decoded) hostname if there is no path.
       String fileName =
           decodeURLEscapeSequences(document()->url().lastPathComponent());
       if (fileName.isEmpty())
         fileName = document()->url().host();
       document()->setTitle(imageTitle(fileName, size));
       if (isDetached())
         return;
     }
 
     document()->imageUpdated();
+    document()->imageLoaded();
   }
 
   if (!isDetached())
     document()->finishedParsing();
 }
 
 // --------
 
 ImageDocument::ImageDocument(const DocumentInit& initializer)
     : HTMLDocument(initializer, ImageDocumentClass),
       m_divElement(nullptr),
       m_imageElement(nullptr),
       m_imageSizeIsKnown(false),
       m_didShrinkImage(false),
       m_shouldShrinkImage(shouldShrinkToFit()),
+      m_imageIsLoaded(false),
+      m_checkerSize(0),
       m_shrinkToFitMode(frame()->settings()->viewportEnabled() ? Viewport
                                                                : Desktop) {
   setCompatibilityMode(QuirksMode);
   lockCompatibilityMode();
   UseCounter::count(*this, UseCounter::ImageDocument);
   if (!isInMainFrame())
     UseCounter::count(*this, UseCounter::ImageDocumentInFrame);
 }
 
 DocumentParser* ImageDocument::createParser() {
@@ skipping 11 matching lines @@
   HTMLHeadElement* head = HTMLHeadElement::create(*this);
   HTMLMetaElement* meta = HTMLMetaElement::create(*this);
   meta->setAttribute(nameAttr, "viewport");
   meta->setAttribute(contentAttr, "width=device-width, minimum-scale=0.1");
   head->appendChild(meta);
 
   HTMLBodyElement* body = HTMLBodyElement::create(*this);
 
   if (shouldShrinkToFit()) {
     // Display the image prominently centered in the frame.
-    body->setAttribute(styleAttr, "margin: 0px;");
+    body->setAttribute(styleAttr, "margin: 0px; background: #0e0e0e;");
 
-    // See w3c example on how to centering an element:
+    // See w3c example on how to center an element:
     // https://www.w3.org/Style/Examples/007/center.en.html
     m_divElement = HTMLDivElement::create(*this);
     m_divElement->setAttribute(styleAttr,
                                "display: flex;"
                                "flex-direction: column;"
                                "justify-content: center;"
                                "align-items: center;"
                                "min-height: min-content;"
                                "min-width: min-content;"
                                "height: 100%;"
                                "width: 100%;");
     HTMLContentElement* content = HTMLContentElement::create(*this);
     m_divElement->appendChild(content);
 
     ShadowRoot& shadowRoot = body->ensureUserAgentShadowRoot();
     shadowRoot.appendChild(m_divElement);
   } else {
     body->setAttribute(styleAttr, "margin: 0px;");
   }
 
   willInsertBody();
 
-  StringBuilder imageStyle;
-  imageStyle.append("-webkit-user-select: none;");
-  if (shouldShrinkToFit() && m_shrinkToFitMode == Viewport)
-    imageStyle.append("max-width: 100%");
   m_imageElement = HTMLImageElement::create(*this);
-  m_imageElement->setAttribute(styleAttr, imageStyle.toAtomicString());
+  updateImageStyle();
   m_imageElement->setLoadingImageDocument();
   m_imageElement->setSrc(url().getString());
   body->appendChild(m_imageElement.get());
   if (loader() && m_imageElement->cachedImage())
     m_imageElement->cachedImage()->responseReceived(loader()->response(),
                                                     nullptr);
 
   if (shouldShrinkToFit()) {
     // Add event listeners
     EventListener* listener = ImageEventListener::create(this);
     if (LocalDOMWindow* domWindow = this->domWindow())
-      domWindow->addEventListener("resize", listener, false);
-    if (m_shrinkToFitMode == Desktop)
-      m_imageElement->addEventListener("click", listener, false);
+      domWindow->addEventListener(EventTypeNames::resize, listener, false);
+
+    if (m_shrinkToFitMode == Desktop) {
+      m_imageElement->addEventListener(EventTypeNames::click, listener, false);
+    } else if (m_shrinkToFitMode == Viewport) {
+      m_imageElement->addEventListener(EventTypeNames::touchend, listener,
+                                       false);
+      m_imageElement->addEventListener(EventTypeNames::touchcancel, listener,
+                                       false);
+    }
   }
 
   rootElement->appendChild(head);
   rootElement->appendChild(body);
 }
 
 float ImageDocument::scale() const {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   if (!m_imageElement || m_imageElement->document() != this)
     return 1.0f;
@@ skipping 18 matching lines @@
       view->height() * manualZoom / imageSize.height().toFloat();
 
   return min(widthScale, heightScale);
 }
 
 void ImageDocument::resizeImageToFit() {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   if (!m_imageElement || m_imageElement->document() != this)
     return;
 
-  DCHECK(m_imageElement->cachedImage());
-  LayoutSize imageSize = m_imageElement->cachedImage()->imageSize(
-      LayoutObject::shouldRespectImageOrientation(
-          m_imageElement->layoutObject()),
-      1.f);
+  LayoutSize imageSize = cachedImageSize(m_imageElement);
 
   const float scale = this->scale();
   m_imageElement->setWidth(static_cast<int>(imageSize.width() * scale));
   m_imageElement->setHeight(static_cast<int>(imageSize.height() * scale));
 
   m_imageElement->setInlineStyleProperty(CSSPropertyCursor, CSSValueZoomIn);
 }
 
 void ImageDocument::imageClicked(int x, int y) {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
@@ skipping 20 matching lines @@
     float scrollX =
         imageX / scale - static_cast<float>(frame()->view()->width()) / 2;
     float scrollY =
         imageY / scale - static_cast<float>(frame()->view()->height()) / 2;
 
     frame()->view()->layoutViewportScrollableArea()->setScrollOffset(
         ScrollOffset(scrollX, scrollY), ProgrammaticScroll);
   }
 }
 
+void ImageDocument::imageLoaded() {
+  m_imageIsLoaded = true;
+
+  if (shouldShrinkToFit()) {
+    // The checkerboard background needs to be inserted.
+    updateImageStyle();
+  }
+}
+
+void ImageDocument::updateImageStyle() {
+  StringBuilder imageStyle;
+  imageStyle.append("-webkit-user-select: none;");
+
+  if (shouldShrinkToFit()) {
+    if (m_shrinkToFitMode == Viewport)
+      imageStyle.append("max-width: 100%;");
+
+    // Once the image has fully loaded, it is displayed atop a checkerboard to
+    // show transparency more faithfully.  The pattern is generated via CSS.
+    if (m_imageIsLoaded) {
+      int newCheckerSize = kBaseCheckerSize;
+
+      if (m_shrinkToFitMode == Viewport) {
+        double scale;
+
+        if (hasFinishedParsing()) {
+          // To ensure the checker pattern is visible for large images, the
+          // checker size is dynamically adjusted to account for how much the
+          // page is currently being scaled.
+          scale = frame()->host()->visualViewport().scale();
+        } else {
+          // The checker pattern is initialized based on how large the image is
+          // relative to the viewport.
+          int viewportWidth = frame()->host()->visualViewport().size().width();
+          scale = viewportWidth / static_cast<double>(calculateDivWidth());
+        }
+
+        newCheckerSize = round(std::max(1.0, newCheckerSize / scale));
+      }
+
+      // The only thing that can differ between updates is the checker size.
+      if (newCheckerSize == m_checkerSize)
+        return;
+      m_checkerSize = newCheckerSize;
+
+      imageStyle.append("background-position: 0px 0px, ");
+      imageStyle.append(AtomicString::number(m_checkerSize));
+      imageStyle.append("px ");
+      imageStyle.append(AtomicString::number(m_checkerSize));
+      imageStyle.append("px;");
+
+      int tileSize = m_checkerSize * 2;
+      imageStyle.append("background-size: ");
+      imageStyle.append(AtomicString::number(tileSize));
+      imageStyle.append("px ");
+      imageStyle.append(AtomicString::number(tileSize));
+      imageStyle.append("px;");
+
+      imageStyle.append(
+          "background-color: white;"
+          "background-image:"
+          "linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, "
+          "#eee 75%, #eee 100%),"
+          "linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, "
+          "#eee 75%, #eee 100%);");
+    }
+  }
+
+  m_imageElement->setAttribute(styleAttr, imageStyle.toAtomicString());
+}
+
 void ImageDocument::imageUpdated() {
   DCHECK(m_imageElement);
 
   if (m_imageSizeIsKnown)
     return;
 
   updateStyleAndLayoutTree();
   if (!m_imageElement->cachedImage() ||
       m_imageElement->cachedImage()
           ->imageSize(LayoutObject::shouldRespectImageOrientation(
@@ skipping 11 matching lines @@
 }
 
 void ImageDocument::restoreImageSize() {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
 
   if (!m_imageElement || !m_imageSizeIsKnown ||
       m_imageElement->document() != this)
     return;
 
   DCHECK(m_imageElement->cachedImage());
-  LayoutSize imageSize = m_imageElement->cachedImage()->imageSize(
-      LayoutObject::shouldRespectImageOrientation(
-          m_imageElement->layoutObject()),
-      1.0f);
+  LayoutSize imageSize = cachedImageSize(m_imageElement);
   m_imageElement->setWidth(imageSize.width().toInt());
   m_imageElement->setHeight(imageSize.height().toInt());
 
   if (imageFitsInWindow())
     m_imageElement->removeInlineStyleProperty(CSSPropertyCursor);
   else
     m_imageElement->setInlineStyleProperty(CSSPropertyCursor, CSSValueZoomOut);
 
   m_didShrinkImage = false;
 }
 
 bool ImageDocument::imageFitsInWindow() const {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   return this->scale() >= 1;
 }
 
+int ImageDocument::calculateDivWidth() {
+  // Zooming in and out of an image being displayed within a viewport is done
+  // by changing the page scale factor of the page instead of changing the
+  // size of the image.  The size of the image is set so that:
+  // * Images wider than the viewport take the full width of the screen.
+  // * Images taller than the viewport are initially aligned with the top of
+  //   of the frame.
+  // * Images smaller in either dimension are centered along that axis.
+  LayoutSize imageSize = cachedImageSize(m_imageElement);
+  int viewportWidth = frame()->host()->visualViewport().size().width();
+
+  // For huge images, minimum-scale=0.1 is still too big on small screens.
+  // Set the <div> width so that the image will shrink to fit the width of the
+  // screen when the scale is minimum.
+  int maxWidth = std::min(imageSize.width().toInt(), viewportWidth * 10);
+  return std::max(viewportWidth, maxWidth);
+}
+
 void ImageDocument::windowSizeChanged() {
   if (!m_imageElement || !m_imageSizeIsKnown ||
       m_imageElement->document() != this)
     return;
 
   if (m_shrinkToFitMode == Viewport) {
-    // Zooming in and out of an image being displayed within a viewport is done
-    // by changing the page scale factor of the page instead of changing the
-    // size of the image.  The size of the image is set so that:
-    // * Images wider than the viewport take the full width of the screen.
-    // * Images taller than the viewport are initially aligned with the top of
-    //   of the frame.
-    // * Images smaller in either dimension are centered along that axis.
-    LayoutSize imageSize = m_imageElement->cachedImage()->imageSize(
-        LayoutObject::shouldRespectImageOrientation(
-            m_imageElement->layoutObject()),
-        1.f);
-    int viewportWidth = frame()->host()->visualViewport().size().width();
-    int viewportHeight = frame()->host()->visualViewport().size().height();
-    float viewportAspectRatio = (float)viewportWidth / viewportHeight;
-
-    // For huge images, minimum-scale=0.1 is still too big on small screens.
-    // Set the <div> width so that the image will shrink to fit the width of the
-    // screen when the scale is minimum.
-    int maxWidth = std::min(imageSize.width().toInt(), viewportWidth * 10);
-    int divWidth = std::max(viewportWidth, maxWidth);
+    LayoutSize imageSize = cachedImageSize(m_imageElement);
+    int divWidth = calculateDivWidth();
     m_divElement->setInlineStyleProperty(CSSPropertyWidth, divWidth,
                                          CSSPrimitiveValue::UnitType::Pixels);
 
     // Explicitly set the height of the <div> containing the <img> so that it
     // can display the full image without shrinking it, allowing a full-width
     // reading mode for normal-width-huge-height images.
+    float viewportAspectRatio =
+        frame()->host()->visualViewport().size().aspectRatio();
     int divHeight = std::max(imageSize.height().toInt(),
-                             (int)(divWidth / viewportAspectRatio));
+                             static_cast<int>(divWidth / viewportAspectRatio));
     m_divElement->setInlineStyleProperty(CSSPropertyHeight, divHeight,
                                          CSSPrimitiveValue::UnitType::Pixels);
     return;
   }
 
   bool fitsInWindow = imageFitsInWindow();
 
   // If the image has been explicitly zoomed in, restore the cursor if the image
   // fits and set it to a zoom out cursor if the image doesn't fit
   if (!m_shouldShrinkImage) {
@@ skipping 44 matching lines @@
 }
 
 // --------
 
 void ImageEventListener::handleEvent(ExecutionContext*, Event* event) {
   if (event->type() == EventTypeNames::resize) {
     m_doc->windowSizeChanged();
   } else if (event->type() == EventTypeNames::click && event->isMouseEvent()) {
     MouseEvent* mouseEvent = toMouseEvent(event);
     m_doc->imageClicked(mouseEvent->x(), mouseEvent->y());
+  } else if ((event->type() == EventTypeNames::touchend ||
+              event->type() == EventTypeNames::touchcancel) &&
+             event->isTouchEvent()) {
+    m_doc->updateImageStyle();
   }
 }
 
 bool ImageEventListener::operator==(const EventListener& listener) const {
   if (const ImageEventListener* imageEventListener =
           ImageEventListener::cast(&listener))
     return m_doc == imageEventListener->m_doc;
   return false;
 }
 
 }  // namespace blink