[Blink] Don't center images in Android WebViews

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 30 matching lines @@
 #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 "core/loader/resource/ImageResource.h"
+#include "core/page/Page.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).
@@ skipping 167 matching lines @@
     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);
 
-  if (shouldShrinkToFit()) {
+  if (shouldCenterImage()) {
     // Display the image prominently centered in the frame.
     body->setAttribute(styleAttr, "margin: 0px; background: #0e0e0e;");
 
     // 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;"
@@ skipping 36 matching lines @@
                                        false);
       m_imageElement->addEventListener(EventTypeNames::touchcancel, listener,
                                        false);
     }
   }
 
   rootElement->appendChild(head);
   rootElement->appendChild(body);
 }
 
+bool ImageDocument::shouldCenterImage() const {
+  bool isAndroidWebView =
+      page() ? page()->settings().getWideViewportQuirkEnabled() : false;
+  return shouldShrinkToFit() && !isAndroidWebView;
+}
+
 float ImageDocument::scale() const {
   DCHECK_EQ(m_shrinkToFitMode, Desktop);
   if (!m_imageElement || m_imageElement->document() != this)
     return 1.0f;
 
   FrameView* view = frame()->view();
   if (!view)
     return 1.0f;
 
   DCHECK(m_imageElement->cachedImage());
@@ skipping 67 matching lines @@
     // 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)
+    if (shouldCenterImage() && m_shrinkToFitMode == Viewport) {
+      // The image occupies the full width of its parent <div>.
       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;
       MouseCursorMode newCursorMode = Default;
 
+      // Images are displayed atop a checkerboard to show transparency more
+      // faithfully.  The pattern is generated via CSS.
       if (m_shrinkToFitMode == Viewport) {
-        double scale;
+        if (shouldCenterImage()) {
+          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());
+          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 = std::round(std::max(1.0, newCheckerSize / scale));
         }
-
-        newCheckerSize = std::round(std::max(1.0, newCheckerSize / scale));
       } else {
         // In desktop mode, the user can click on the image to zoom in or out.
         DCHECK_EQ(m_shrinkToFitMode, Desktop);
         if (imageFitsInWindow()) {
           newCursorMode = Default;
         } else {
           newCursorMode = m_shouldShrinkImage ? ZoomIn : ZoomOut;
         }
       }
 
       // The only things that can differ between updates are checker size and
       // the type of cursor being displayed.
       if (newCheckerSize == m_styleCheckerSize &&
           newCursorMode == m_styleMouseCursorMode) {
         return;
       }
       m_styleCheckerSize = newCheckerSize;
       m_styleMouseCursorMode = newCursorMode;
 
-      imageStyle.append("background-position: 0px 0px, ");
-      imageStyle.append(AtomicString::number(m_styleCheckerSize));
-      imageStyle.append("px ");
-      imageStyle.append(AtomicString::number(m_styleCheckerSize));
-      imageStyle.append("px;");
+      // Generate the new image style string.
+      if (shouldCenterImage()) {
+        imageStyle.append("background-position: 0px 0px, ");
+        imageStyle.append(AtomicString::number(m_styleCheckerSize));
+        imageStyle.append("px ");
+        imageStyle.append(AtomicString::number(m_styleCheckerSize));
+        imageStyle.append("px;");
 
-      int tileSize = m_styleCheckerSize * 2;
-      imageStyle.append("background-size: ");
-      imageStyle.append(AtomicString::number(tileSize));
-      imageStyle.append("px ");
-      imageStyle.append(AtomicString::number(tileSize));
-      imageStyle.append("px;");
+        int tileSize = m_styleCheckerSize * 2;
+        imageStyle.append("background-size: ");
+        imageStyle.append(AtomicString::number(tileSize));
+        imageStyle.append("px ");
+        imageStyle.append(AtomicString::number(tileSize));
+        imageStyle.append("px;");
 
-      // Generating the checkerboard pattern this way is not exactly cheap.
-      // If rasterization performance becomes an issue, we could look at using
-      // a cheaper shader (e.g. pre-generate a scaled tile + base64-encode +
-      // inline dataURI => single bitmap shader).
-      imageStyle.append(
-          "background-image:"
-          "linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, "
-          "#eee 75%, #eee 100%),"
-          "linear-gradient(45deg, #eee 25%, white 25%, white 75%, "
-          "#eee 75%, #eee 100%);");
+        // Generating the checkerboard pattern this way is not exactly cheap.
+        // If rasterization performance becomes an issue, we could look at using
+        // a cheaper shader (e.g. pre-generate a scaled tile + base64-encode +
+        // inline dataURI => single bitmap shader).
+        imageStyle.append(
+            "background-image:"
+            "linear-gradient(45deg, #eee 25%, transparent 25%, transparent "
+            "75%, "
+            "#eee 75%, #eee 100%),"
+            "linear-gradient(45deg, #eee 25%, white 25%, white 75%, "
+            "#eee 75%, #eee 100%);");
+      }
 
       if (m_shrinkToFitMode == Desktop) {
         if (m_styleMouseCursorMode == ZoomIn)
           imageStyle.append("cursor: zoom-in;");
         else if (m_styleMouseCursorMode == ZoomOut)
           imageStyle.append("cursor: zoom-out;");
       }
     }
   }
 
@@ skipping 61 matching lines @@
   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) {
-    LayoutSize imageSize = cachedImageSize(m_imageElement);
-    int divWidth = calculateDivWidth();
-    m_divElement->setInlineStyleProperty(CSSPropertyWidth, divWidth,
-                                         CSSPrimitiveValue::UnitType::Pixels);
+    if (shouldCenterImage()) {
+      // Set the size of the <div> containing the <img>.  The latter is set
+      // to occupy 100% of the <div>'s width in updateImageStyle().
+      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(),
-                             static_cast<int>(divWidth / viewportAspectRatio));
-    m_divElement->setInlineStyleProperty(CSSPropertyHeight, divHeight,
-                                         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(),
+                   static_cast<int>(divWidth / viewportAspectRatio));
+      m_divElement->setInlineStyleProperty(CSSPropertyHeight, divHeight,
+                                           CSSPrimitiveValue::UnitType::Pixels);
+    } else {
+      // Set the max width of the <img> to prevent it from becoming too large.
+      // See calculateDivWidth() for details.
+      int viewportWidth = frame()->host()->visualViewport().size().width();
+      m_imageElement->setInlineStyleProperty(

[aelias_OOO_until_Jul13, 2017/01/19 00:23:49]

Could you try instead returning false from ImageDocument::shouldShrinkToFit() if
page()->settings().getForceZeroLayoutHeight() is true?  I believe that should
avoid the problem in the WRAP_CONTENT WebView case while still allowing a
scale-down behavior in the MATCH_PARENT WebView case, without needing to
introduce a WebView-specific scaling path like this one.

+          CSSPropertyMaxWidth, viewportWidth * 10,
+          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) {
     updateImageStyle();
     return;
@@ skipping 65 matching lines @@
 }
 
 bool ImageEventListener::operator==(const EventListener& listener) const {
   if (const ImageEventListener* imageEventListener =
           ImageEventListener::cast(&listener))
     return m_doc == imageEventListener->m_doc;
   return false;
 }
 
 }  // namespace blink