Fix image-orientation with the slow painting path

The painting path that uses tiled image painting to draw
background images was incorrectly orientating images sized
with contains or covers. The problem was in using an
un-oriented image size when correcting the source rect
for orientation, when an oriented size is expected.

In hindsight, we should be using the oriented size for the
tile size, subsetting and other operations in the slow path.
This also simplifies the repeated tile case.

The test fails due to decoding artifacts from the oriented
images, but the reference result also shows bad antialiasing
artifacts around the edges. We need fuzzy matching.

Bug: 1129956
Change-Id: I584b821f110720854fc21df49168afcf37fdc09b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2533505
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#827045}

third_party/blink/renderer/core/paint/box_painter_base.cc

@@ -411,6 +411,13 @@ void DrawTiledBackground(GraphicsContext& context,
   // Use the intrinsic size of the image if it has one, otherwise force the
   // generated image to be the tile size.
   FloatSize intrinsic_tile_size(image->Size());
+  // image-resolution information is baked into the given parameters, but we
+  // need oriented size. That requires explicitly applying orientation here.
+  if (respect_orientation &&
+      image->CurrentFrameOrientation().UsesWidthAsHeight()) {
+    intrinsic_tile_size = intrinsic_tile_size.TransposedSize();
+  }
+
   FloatSize scale(1, 1);
   if (!image->HasIntrinsicSize() ||
       // TODO(crbug.com/1042783): This is not checking for real empty image
@@ -456,7 +463,7 @@ void DrawTiledBackground(GraphicsContext& context,
   }
 
   // At this point we have decided to tile the image to fill the dest rect.
-  // Note that this tile rect the image's pre-scaled size.
+  // Note that this tile rect uses the image's pre-scaled size.
   FloatRect tile_rect(FloatPoint(), intrinsic_tile_size);
 
   // Farther down the pipeline we will use the scaled tile size to determine

third_party/blink/renderer/platform/graphics/image.cc

@@ -236,26 +236,22 @@ void Image::DrawPattern(GraphicsContext& context,
   if (!image)
     return;  // nothing to draw
 
-  // The subset_rect is in source image space, unscaled, unoriented.
+  // The subset_rect is in source image space, unscaled but oriented.
+  // image-resolution information is baked into the scale_src_to_dest,
+  // so we do not want to use it in computing the subset. That requires
+  // explicitly applying orientation here.
   IntRect subset_rect = EnclosingIntRect(float_src_rect);
-  subset_rect.Intersect(IntRect(0, 0, image.width(), image.height()));
+  IntSize oriented_image_size(image.width(), image.height());
+  if (respect_orientation && CurrentFrameOrientation().UsesWidthAsHeight())
+    oriented_image_size = oriented_image_size.TransposedSize();
+  subset_rect.Intersect(IntRect(IntPoint(), oriented_image_size));
   if (subset_rect.IsEmpty())
     return;  // nothing to draw
 
   // Apply image orientation, if necessary
   FloatSize oriented_scale = scale_src_to_dest;
   if (respect_orientation && !HasDefaultOrientation()) {
-    FloatSize original_image_size(SizeAsFloat(kDoNotRespectImageOrientation));
     image = ResizeAndOrientImage(image, CurrentFrameOrientation());
-    subset_rect = RoundedIntRect(CorrectSrcRectForImageOrientation(
-        original_image_size, FloatRect(subset_rect)));
-    // Upstream, the scale_src_to_dest was computed to take an un-oriented size
-    // and make it oriented. For example, an image that is 100x50 un-oriented
-    // and 50x100 oriented will have a scale of (0.5,2). Undo this, because the
-    // scale has now been applied by orienting the image.
-    oriented_scale.Scale(
-        original_image_size.Width() / static_cast<float>(image.width()),
-        original_image_size.Height() / static_cast<float>(image.height()));
   }
 
   SkMatrix local_matrix;

third_party/blink/web_tests/TestExpectations

@@ -395,6 +395,7 @@ crbug.com/997202 external/wpt/css/css-images/image-orientation/svg-image-orienta
 crbug.com/997202 external/wpt/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html [ Failure ]
 crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-background-position.html [ Failure ]
 crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-background-properties.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html [ Failure ]
 crbug.com/997202 external/wpt/density-size-correction/density-corrected-image-svg-aspect-ratio.html [ Failure ]
 
 # These have filtering antialiasing artifacts on one side only, but otherwise are passing. The tests

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html

+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-properties-border-radius-ref.html">
+<meta name=fuzzy content="10;100">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(support/exif-orientation-5-lu.jpg);
+        background-repeat: no-repeat;
+        border-radius: 5px;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-background-properties.html

@@ -12,7 +12,6 @@
         position: absolute;
         width: 200px;
         height: 200PX;
-        vertical-align: top;
         background-image: url(support/exif-orientation-5-lu.jpg);
         background-repeat: no-repeat;
     }

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html

+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        border-radius: 5px;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html

@@ -10,7 +10,6 @@
         position: absolute;
         width: 200px;
         height: 200PX;
-        vertical-align: top;
         background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
         background-repeat: no-repeat;
     }