[WPT] Add image-orientation tests

Add tests for the following:
- Images in <embed>
- Images in <object>
- Background repeat, position and size properties

Chromium fails the background repeat tests.

Also removed border properties from the existing tests as they
influence the compositing behavior of Chromium and are not necessary
for the test.

All the tests are marked as failing for Chromium due to a lack of fuzzy
matching support.

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

third_party/blink/web_tests/TestExpectations

@@ -322,45 +322,24 @@ wpt_internal/webgpu/* [ Skip ]
 
 crbug.com/1018273 [ Mac ] compositing/gestures/gesture-tapHighlight-2-iframe-scrolled-inner.html [ Failure ]
 
+# Fails due to lack of support for image orientation in tiling shaders.
+crbug.com/1066634 external/wpt/css/css-images/image-orientation/image-orientation-background-properties.html [ Failure ]
+
 # Fail due to lack of fuzzy matching on Linux, Win and Mac platforms for WPT. The pixels in the pre-rotated reference
 # images do not exactly match the exif rotated images, probably due to jpeg decoding/encoding issues. Maybe
 # adjusting the image size to a multiple of 8 would fix this (so all jpeg blocks are solid color).
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-default.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-content-images.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-image-document.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-none-image-document.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-none-content-images.html [ Failure ]
-crbug.com/997202 [ Linux ] external/wpt/css/css-images/image-orientation/image-orientation-none.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-default.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-content-images.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-image-document.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-none-image-document.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-none-content-images.html [ Failure ]
-crbug.com/997202 [ Mac ] external/wpt/css/css-images/image-orientation/image-orientation-none.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-default.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-content-images.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-image-document.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-none-image-document.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-none-content-images.html [ Failure ]
-crbug.com/997202 [ Win ] external/wpt/css/css-images/image-orientation/image-orientation-none.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-default.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-content-images.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-none-image-document.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-none-content-images.html [ Failure ]
+crbug.com/997202 external/wpt/css/css-images/image-orientation/image-orientation-none.html [ Failure ]
 
 crbug.com/1042453 [ Win ] external/wpt/css/filter-effects/idlharness.any.html [ Timeout Pass ]
 crbug.com/1042453 [ Mac ] external/wpt/css/filter-effects/idlharness.any.html [ Timeout Pass ]

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-background-properties.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-ref.html">
+<meta name=fuzzy content="10;100">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        vertical-align: top;
+        background-image: url(support/exif-orientation-5-lu.jpg);
+        background-repeat: no-repeat;
+    }
+
+    .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-default.html

@@ -11,9 +11,6 @@
     body {
         overflow: hidden;
     }
-    img {
-        border: 1px solid black;
-    }
     div {
         display: inline-block;
         width: 100px;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html

@@ -12,7 +12,6 @@
         overflow: hidden;}
     img {
         will-change: transform;
-        border: 1px solid black;
         image-orientation: none;
     }
     div {

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html

@@ -13,7 +13,6 @@
     }
     img {
         will-change: transform;
-        border: 1px solid black;
         image-orientation: from-image;
     }
     div {

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited.html

@@ -14,7 +14,6 @@
     }
     img {
         will-change: transform;
-        border: 1px solid black;
     }
     div {
         display: inline-block;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-computed-style.html

@@ -10,7 +10,8 @@
 <style>
     body {
         overflow: hidden;
-        image-orientation: from-image;}
+        image-orientation: from-image;
+    }
     div {
         display: inline-block;
         width: 100px;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-content-images.html

@@ -10,7 +10,6 @@
 <style>
     div.image {
         display: inline-block;
-        border: 1px solid black;
     }
     div.container {
         display: inline-block;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html

@@ -12,7 +12,6 @@
         overflow: hidden;
     }
     img {
-        border: 1px solid black;
         image-orientation: none;
     }
     div {

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html

@@ -12,7 +12,6 @@
         overflow: hidden;
     }
     img {
-        border: 1px solid black;
         image-orientation: from-image;
     }
     div {

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-image-document.html → third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html

@@ -2,10 +2,10 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>CSS Images Module Level 3: image-orientation: from-image in image documents</title>
+<title>CSS Images Module Level 3: image-orientation: from-image in embedded content</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-from-image-image-document-ref.html">
+<link rel="match" href="reference/image-orientation-from-image-embedded-content-ref.html">
 <meta name=fuzzy content="10;100">
 <style>
     iframe {
@@ -13,9 +13,18 @@
         width: 120px;
         height: 110px;
         vertical-align: top;
-        border: 1px solid black;
         image-orientation: from-image;
-         }
+    }
+    embed {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+    object {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
 </style>
 </head>
 <body>
@@ -23,13 +32,13 @@
        documents always respect the orientation, regardless of the image-orientation
        property.</p>
     <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
-    <iframe src="support/exif-orientation-2-ur.jpg" frameborder=0></iframe>
-    <iframe src="support/exif-orientation-3-lr.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="support/exif-orientation-2-ur.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="support/exif-orientation-3-lr.jpg" width="120" height="110px"></object>
     <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
     <br>
     <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
-    <iframe src="support/exif-orientation-6-ru.jpg" frameborder=0></iframe>
-    <iframe src="support/exif-orientation-7-rl.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="support/exif-orientation-6-ru.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="support/exif-orientation-7-rl.jpg" width="120" height="110px"></object>
     <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
     <br>
     <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>

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

@@ -12,9 +12,6 @@
         overflow: hidden;
         image-orientation: from-image;
     }
-    img {
-        border: 1px solid black;
-    }
     div {
         display: inline-block;
         width: 100px;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-none-content-images.html

@@ -10,7 +10,6 @@
 <style>
     div.image {
         display: inline-block;
-        border: 1px solid black;
     }
     div.container {
         display: inline-block;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-none-image-document.html

@@ -15,7 +15,6 @@
         width: 120px;
         height: 110px;
         vertical-align: top;
-        border: 1px solid black;
         image-orientation: none;
      }
 </style>

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

@@ -12,9 +12,6 @@
         overflow: hidden;
         image-orientation: none;
     }
-    img {
-        border: 1px solid black;
-    }
     div {
         display: inline-block;
         width: 100px;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-background-properties-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;
+        vertical-align: top;
+        background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
+        background-repeat: no-repeat;
+    }
+
+    .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-default-ref.html

@@ -8,10 +8,6 @@
     body {
         overflow: hidden;
     }
-    img {
-        border: 1px
-        solid black;
-    }
     div {
         display: inline-block;
         width: 100px;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html

@@ -7,7 +7,6 @@
 <style>
     div.image {
         display: inline-block;
-        border: 1px solid black;
     }
     div.container {
         display: inline-block;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-from-image-image-document-ref.html → third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>CSS Images Module Level 3: image-orientation: from-image in image documents</title>
+<title>CSS Images Module Level 3: image-orientation: from-image in embedded content (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>
@@ -11,8 +11,17 @@
         width: 120px;
         height: 110px;
         vertical-align: top;
-        border: 1px solid black;
-         }
+    }
+    embed {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+    object {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
 </style>
 </head>
 <body>
@@ -20,13 +29,13 @@
        documents always respect the orientation, regardless of the image-orientation
        property.</p>
     <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
-    <iframe src="../support/exif-orientation-2-ur-pre-rotated.jpg" frameborder=0></iframe>
-    <iframe src="../support/exif-orientation-3-lr-pre-rotated.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="../support/exif-orientation-2-ur-pre-rotated.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="../support/exif-orientation-3-lr-pre-rotated.jpg" width="120" height="110px"></object>
     <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
     <br>
     <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
-    <iframe src="../support/exif-orientation-6-ru-pre-rotated.jpg" frameborder=0></iframe>
-    <iframe src="../support/exif-orientation-7-rl-pre-rotated.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="../support/exif-orientation-6-ru-pre-rotated.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="../support/exif-orientation-7-rl-pre-rotated.jpg" width="120" height="110px"></object>
     <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
     <br>
     <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>

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

@@ -9,9 +9,6 @@
     body {
         overflow: hidden;
     }
-    img {
-        border: 1px solid black;
-    }
     div {
         display: inline-block;
         width: 100px;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html

@@ -8,7 +8,6 @@
 <style>
     div.image {
         display: inline-block;
-        border: 1px solid black;
     }
     div.container {
         display: inline-block;

third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html

@@ -13,7 +13,6 @@
         width: 120px;
         height: 110px;
         vertical-align: top;
-        border: 1px solid black;
      }
 </style>
 </head>

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

@@ -9,9 +9,6 @@
     body {
         overflow: hidden;
     }
-    img {
-        border: 1px solid black;
-    }
     div {
         display: inline-block;
         width: 100px;