[Blink] Display images in the center of the screen

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 20 matching lines @@
 #include "core/events/MouseEvent.h"
 #include "core/fetch/ImageResource.h"
 #include "core/frame/FrameHost.h"
 #include "core/frame/FrameView.h"
 #include "core/frame/LocalDOMWindow.h"
 #include "core/frame/LocalFrame.h"
 #include "core/frame/Settings.h"
 #include "core/frame/UseCounter.h"
 #include "core/frame/VisualViewport.h"
 #include "core/html/HTMLBodyElement.h"
+#include "core/html/HTMLContentElement.h"
+#include "core/html/HTMLDivElement.h"
 #include "core/html/HTMLHeadElement.h"
 #include "core/html/HTMLHtmlElement.h"
 #include "core/html/HTMLImageElement.h"
 #include "core/html/HTMLMetaElement.h"
 #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"
@@ skipping 122 matching lines @@
   }
 
   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_shrinkToFitMode(frame()->settings()->viewportEnabled() ? Viewport
                                                                : Desktop) {
   setCompatibilityMode(QuirksMode);
   lockCompatibilityMode();
   UseCounter::count(*this, UseCounter::ImageDocument);
   if (!isInMainFrame())
@@ skipping 12 matching lines @@
   if (isStopped())
     return;  // runScriptsAtDocumentElementAvailable can detach the frame.
 
   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);
-  body->setAttribute(styleAttr, "margin: 0px;");
+
+  if (shouldShrinkToFit()) {
+    // Display the image prominently centered in the frame.
+    body->setAttribute(styleAttr, "margin: 0px;");
+
+    // See w3c example on how to centering 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, "-webkit-user-select: none");
+  m_imageElement->setAttribute(styleAttr, imageStyle.toAtomicString());
   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);
@@ skipping 56 matching lines @@
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
 
   if (!m_imageSizeIsKnown || imageFitsInWindow())
     return;
 
   m_shouldShrinkImage = !m_shouldShrinkImage;
 
   if (m_shouldShrinkImage) {
     windowSizeChanged();
   } else {
+    // Adjust the coordinates to account for the fact that the image was
+    // centered on the screen.
+    float imageX = x - m_imageElement->offsetLeft();
+    float imageY = y - m_imageElement->offsetTop();
+
     restoreImageSize();
 
     updateStyleAndLayout();
 
     double scale = this->scale();
 
     float scrollX =
-        x / scale - static_cast<float>(frame()->view()->width()) / 2;
+        imageX / scale - static_cast<float>(frame()->view()->width()) / 2;
     float scrollY =
-        y / scale - static_cast<float>(frame()->view()->height()) / 2;
+        imageY / scale - static_cast<float>(frame()->view()->height()) / 2;
 
     frame()->view()->layoutViewportScrollableArea()->setScrollOffset(
         ScrollOffset(scrollX, scrollY), ProgrammaticScroll);
   }
 }
 
 void ImageDocument::imageUpdated() {
   DCHECK(m_imageElement);
 
   if (m_imageSizeIsKnown)
@@ skipping 43 matching lines @@
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   return this->scale() >= 1;
 }
 
 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 max-width so that the image will shrink to fit the width of the
-    // screen when the scale is minimum.  Don't shrink height to fit because we
-    // use width=device-width in viewport meta tag, and expect a full-width
+    // 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);
+    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.
-    int viewportWidth = frame()->host()->visualViewport().size().width();
-    m_imageElement->setInlineStyleProperty(CSSPropertyMaxWidth,
-                                           viewportWidth * 10,
-                                           CSSPrimitiveValue::UnitType::Pixels);
+    int divHeight = std::max(imageSize.height().toInt(),
+                             (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) {
     if (fitsInWindow)
       m_imageElement->removeInlineStyleProperty(CSSPropertyCursor);
@@ skipping 29 matching lines @@
   }
 
   return m_imageElement->cachedImage();
 }
 
 bool ImageDocument::shouldShrinkToFit() const {
   return frame()->isMainFrame();
 }
 
 DEFINE_TRACE(ImageDocument) {
+  visitor->trace(m_divElement);
   visitor->trace(m_imageElement);
   HTMLDocument::trace(visitor);
 }
 
 // --------
 
 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());
   }
 }
 
 bool ImageEventListener::operator==(const EventListener& listener) const {
   if (const ImageEventListener* imageEventListener =
           ImageEventListener::cast(&listener))
     return m_doc == imageEventListener->m_doc;
   return false;
 }
 
 }  // namespace blink