Do not show image placeholders for CSS sprites

third_party/WebKit/Source/core/css/resolver/ElementStyleResources.cpp

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc.
  * All rights reserved.
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Library General Public
  * License as published by the Free Software Foundation; either
  * version 2 of the License, or (at your option) any later version.
@@ skipping 22 matching lines @@
 #include "core/style/CursorData.h"
 #include "core/style/FillLayer.h"
 #include "core/style/FilterOperation.h"
 #include "core/style/StyleFetchedImage.h"
 #include "core/style/StyleFetchedImageSet.h"
 #include "core/style/StyleGeneratedImage.h"
 #include "core/style/StyleImage.h"
 #include "core/style/StyleInvalidImage.h"
 #include "core/style/StylePendingImage.h"
 #include "core/svg/SVGElementProxy.h"
+#include "platform/Length.h"
+#include "platform/loader/fetch/FetchParameters.h"
 #include "platform/loader/fetch/ResourceFetcher.h"
 
 namespace blink {
 
 ElementStyleResources::ElementStyleResources(Document& document,
                                              float device_scale_factor)
     : document_(&document), device_scale_factor_(device_scale_factor) {}
 
 StyleImage* ElementStyleResources::GetStyleImage(CSSPropertyID property,
                                                  const CSSValue& value) {
@@ skipping 54 matching lines @@
       computed_style->MutableFilter().Operations();
   for (auto& filter_operation : filter_operations) {
     if (filter_operation->GetType() != FilterOperation::REFERENCE)
       continue;
     ReferenceFilterOperation& reference_operation =
         ToReferenceFilterOperation(*filter_operation);
     reference_operation.ElementProxy().Resolve(*document_);
   }
 }
 
+static bool ComputedStyleMayBeCSSSpriteBackgroundImage(
+    const ComputedStyle& style) {
+  // Simple heuristic to guess if CSS background image is used to create CSS
+  // sprites. For a legit background image it's very likely the height or the
+  // width will be set to auto. For CSS sprite image, height or width will
+  // probably be specified.
+  return style.HasBackgroundImage() &&
+         (!style.LogicalHeight().IsAuto() || !style.LogicalWidth().IsAuto());

[sclittle, 2017/04/28 23:55:54]

These LogicalWidth/Height().IsAuto() checks seem odd - have you tested these
rules on a lot of sites to see how well these rules target all sprites and only
sprites?

[Raj, 2017/04/30 18:35:28]

I tested all examples from below link and some other demo sites.
https://www.w3schools.com/css/css_image_sprites.asp
I will test with few more.

This heuristic is similar to:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/frame/Sma...

The problem with similar check from below CL is that xPosition().isZero() will
fail for the sprite image with background_x=0
https://codereview.chromium.org/2710113002/diff/1/third_party/WebKit/Source/c...
For example, first image will not be detected as sprite.
https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img

background.xPosition().isFixed() || background.yPosition().isFixed() check may
be sufficient enough too.

[sclittle, 2017/05/08 20:34:44]

Any updates from testing these rules out on a few more sprites? I'm just worried
that width and height could be set on a lot of objects that aren't sprites.

[rajendrant, 2017/06/12 20:31:04]

As you suggested, I changed the check to (background.xPosition().isFixed() ||
background.yPosition().isFixed()), since that is more meaningful for sprite
images.

+}
+
 StyleImage* ElementStyleResources::LoadPendingImage(
     ComputedStyle* style,
     StylePendingImage* pending_image,
+    FetchParameters::PlaceholderImageRequestType placeholder_image_request_type,
     CrossOriginAttributeValue cross_origin) {
-  if (CSSImageValue* image_value = pending_image->CssImageValue())
-    return image_value->CacheImage(*document_, cross_origin);
+  if (CSSImageValue* image_value = pending_image->CssImageValue()) {
+    return image_value->CacheImage(*document_, placeholder_image_request_type,
+                                   cross_origin);
+  }
 
   if (CSSPaintValue* paint_value = pending_image->CssPaintValue()) {
     StyleGeneratedImage* image = StyleGeneratedImage::Create(*paint_value);
     style->AddPaintImage(image);
     return image;
   }
 
   if (CSSImageGeneratorValue* image_generator_value =
           pending_image->CssImageGeneratorValue()) {
     image_generator_value->LoadSubimages(*document_);
     return StyleGeneratedImage::Create(*image_generator_value);
   }
 
-  if (CSSImageSetValue* image_set_value = pending_image->CssImageSetValue())
+  if (CSSImageSetValue* image_set_value = pending_image->CssImageSetValue()) {
     return image_set_value->CacheImage(*document_, device_scale_factor_,
+                                       placeholder_image_request_type,
                                        cross_origin);
+  }
 
   NOTREACHED();
   return nullptr;
 }
 
 void ElementStyleResources::LoadPendingImages(ComputedStyle* style) {
   // We must loop over the properties and then look at the style to see if
   // a pending image exists, and only load that image. For example:
   //
   // <style>
@@ skipping 10 matching lines @@
   // If we eagerly loaded the images we'd fetch a.png, even though it's not
   // used. If we didn't null check below we'd crash since the none actually
   // removed all background images.
 
   for (CSSPropertyID property : pending_image_properties_) {
     switch (property) {
       case CSSPropertyBackgroundImage: {
         for (FillLayer* background_layer = &style->AccessBackgroundLayers();
              background_layer; background_layer = background_layer->Next()) {
           if (background_layer->GetImage() &&
-              background_layer->GetImage()->IsPendingImage())
+              background_layer->GetImage()->IsPendingImage()) {
             background_layer->SetImage(LoadPendingImage(
-                style, ToStylePendingImage(background_layer->GetImage())));
+                style, ToStylePendingImage(background_layer->GetImage()),
+                ComputedStyleMayBeCSSSpriteBackgroundImage(*style)
+                    ? FetchParameters::kDisallowPlaceholder
+                    : FetchParameters::kAllowPlaceholder));
+          }
         }
         break;
       }
       case CSSPropertyContent: {
         for (ContentData* content_data =
                  const_cast<ContentData*>(style->GetContentData());
              content_data; content_data = content_data->Next()) {
           if (content_data->IsImage()) {
             StyleImage* image = ToImageContentData(content_data)->GetImage();
-            if (image->IsPendingImage())
+            if (image->IsPendingImage()) {
               ToImageContentData(content_data)
                   ->SetImage(
-                      LoadPendingImage(style, ToStylePendingImage(image)));
+                      LoadPendingImage(style, ToStylePendingImage(image),
+                                       FetchParameters::kAllowPlaceholder));
+            }
           }
         }
         break;
       }
       case CSSPropertyCursor: {
         if (CursorList* cursor_list = style->Cursors()) {
           for (size_t i = 0; i < cursor_list->size(); ++i) {
             CursorData& current_cursor = cursor_list->at(i);
             if (StyleImage* image = current_cursor.GetImage()) {
-              if (image->IsPendingImage())
+              if (image->IsPendingImage()) {
                 current_cursor.SetImage(
-                    LoadPendingImage(style, ToStylePendingImage(image)));
+                    LoadPendingImage(style, ToStylePendingImage(image),
+                                     FetchParameters::kAllowPlaceholder));
+              }
             }
           }
         }
         break;
       }
       case CSSPropertyListStyleImage: {
         if (style->ListStyleImage() &&
-            style->ListStyleImage()->IsPendingImage())
+            style->ListStyleImage()->IsPendingImage()) {
           style->SetListStyleImage(LoadPendingImage(
-              style, ToStylePendingImage(style->ListStyleImage())));
+              style, ToStylePendingImage(style->ListStyleImage()),
+              FetchParameters::kAllowPlaceholder));
+        }
         break;
       }
       case CSSPropertyBorderImageSource: {
         if (style->BorderImageSource() &&
-            style->BorderImageSource()->IsPendingImage())
+            style->BorderImageSource()->IsPendingImage()) {
           style->SetBorderImageSource(LoadPendingImage(
-              style, ToStylePendingImage(style->BorderImageSource())));
+              style, ToStylePendingImage(style->BorderImageSource()),
+              FetchParameters::kAllowPlaceholder));
+        }
         break;
       }
       case CSSPropertyWebkitBoxReflect: {
         if (StyleReflection* reflection = style->BoxReflect()) {
           const NinePieceImage& mask_image = reflection->Mask();
           if (mask_image.GetImage() &&
               mask_image.GetImage()->IsPendingImage()) {
             StyleImage* loaded_image = LoadPendingImage(
-                style, ToStylePendingImage(mask_image.GetImage()));
+                style, ToStylePendingImage(mask_image.GetImage()),
+                FetchParameters::kAllowPlaceholder);
             reflection->SetMask(NinePieceImage(
                 loaded_image, mask_image.ImageSlices(), mask_image.Fill(),
                 mask_image.BorderSlices(), mask_image.Outset(),
                 mask_image.HorizontalRule(), mask_image.VerticalRule()));
           }
         }
         break;
       }
       case CSSPropertyWebkitMaskBoxImageSource: {
         if (style->MaskBoxImageSource() &&
-            style->MaskBoxImageSource()->IsPendingImage())
+            style->MaskBoxImageSource()->IsPendingImage()) {
           style->SetMaskBoxImageSource(LoadPendingImage(
-              style, ToStylePendingImage(style->MaskBoxImageSource())));
+              style, ToStylePendingImage(style->MaskBoxImageSource()),
+              FetchParameters::kAllowPlaceholder));
+        }
         break;
       }
       case CSSPropertyWebkitMaskImage: {
         for (FillLayer* mask_layer = &style->AccessMaskLayers(); mask_layer;
              mask_layer = mask_layer->Next()) {
           if (mask_layer->GetImage() &&
-              mask_layer->GetImage()->IsPendingImage())
+              mask_layer->GetImage()->IsPendingImage()) {
             mask_layer->SetImage(LoadPendingImage(
-                style, ToStylePendingImage(mask_layer->GetImage())));
+                style, ToStylePendingImage(mask_layer->GetImage()),
+                FetchParameters::kAllowPlaceholder));
+          }
         }
         break;
       }
       case CSSPropertyShapeOutside:
         if (style->ShapeOutside() && style->ShapeOutside()->GetImage() &&
-            style->ShapeOutside()->GetImage()->IsPendingImage())
+            style->ShapeOutside()->GetImage()->IsPendingImage()) {
           style->ShapeOutside()->SetImage(LoadPendingImage(
               style, ToStylePendingImage(style->ShapeOutside()->GetImage()),
+              FetchParameters::kAllowPlaceholder,
               kCrossOriginAttributeAnonymous));
+        }
         break;
       default:
         NOTREACHED();
     }
   }
 }
 
 void ElementStyleResources::LoadPendingResources(
     ComputedStyle* computed_style) {
   LoadPendingImages(computed_style);
   LoadPendingSVGDocuments(computed_style);
 }
 
 }  // namespace blink