From c5dfeeb5d34dbe3866dbf025a907230379b86980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Talbot?= <github@gtalbot.org>
Date: Fri, 20 Nov 2020 19:34:43 -0500
Subject: [PATCH] Added 4 background-size (with no intrinsic and no ratio)
 tests

---
 css/css-backgrounds/background-size-041.html  | 48 ++++++++++++++++++
 css/css-backgrounds/background-size-042.html  | 48 ++++++++++++++++++
 css/css-backgrounds/background-size-043.html  | 48 ++++++++++++++++++
 css/css-backgrounds/background-size-044.html  | 48 ++++++++++++++++++
 .../reference/background-size-041-ref.html    | 49 +++++++++++++++++++
 .../reference/background-size-042-ref.html    | 49 +++++++++++++++++++
 .../reference/background-size-043-ref.html    | 27 ++++++++++
 .../reference/background-size-044-ref.html    | 27 ++++++++++
 .../support/orange-intrinsic-none.svg         |  3 ++
 9 files changed, 347 insertions(+)
 create mode 100644 css/css-backgrounds/background-size-041.html
 create mode 100644 css/css-backgrounds/background-size-042.html
 create mode 100644 css/css-backgrounds/background-size-043.html
 create mode 100644 css/css-backgrounds/background-size-044.html
 create mode 100644 css/css-backgrounds/reference/background-size-041-ref.html
 create mode 100644 css/css-backgrounds/reference/background-size-042-ref.html
 create mode 100644 css/css-backgrounds/reference/background-size-043-ref.html
 create mode 100644 css/css-backgrounds/reference/background-size-044-ref.html
 create mode 100644 css/css-backgrounds/support/orange-intrinsic-none.svg
diff --git a/css/css-backgrounds/background-size-041.html b/css/css-backgrounds/background-size-041.html
new file mode 100644
index 00000000000000..f4ec62da728fbb
--- /dev/null
+++ b/css/css-backgrounds/background-size-041.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Backgrounds and Borders Test: background-size with &lt;length&gt; value and 'auto' and image with no intrinsic size and no intrinsic ratio</title>
+
+  <!--
+  Credit should go to Henrik Andersson
+  for originally reporting this issue.
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
+
+  <!--
+
+  [css-backgrounds] [css-images] Interop for sizing gradients with only width
+  http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html
+
+  Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect
+  https://bugs.chromium.org/p/chromium/issues/detail?id=935057
+
+  Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered
+  https://bugs.webkit.org/show_bug.cgi?id=170834
+
+  -->
+
+  <link rel="match" href="reference/background-size-041-ref.html">
+
+  <meta content="" name="flags">
+  <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert">
+
+  <style>
+  div
+    {
+      background-clip: content-box; /* border-box is the initial background-clip value */
+      background-image: linear-gradient(orange, blue);
+      background-origin: border-box; /* padding-box is the initial background-origin value */
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 200px auto;
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+  </style>
+
+  <div></div>
diff --git a/css/css-backgrounds/background-size-042.html b/css/css-backgrounds/background-size-042.html
new file mode 100644
index 00000000000000..c78e0c57830611
--- /dev/null
+++ b/css/css-backgrounds/background-size-042.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Backgrounds and Borders Test: background-size with &lt;percent&gt; value and 'auto' and image with no intrinsic size and no intrinsic ratio</title>
+
+  <!--
+  Credit should go to Henrik Andersson
+  for originally reporting this issue.
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
+
+  <!--
+
+  [css-backgrounds] [css-images] Interop for sizing gradients with only width
+  http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html
+
+  Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect
+  https://bugs.chromium.org/p/chromium/issues/detail?id=935057
+
+  Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered
+  https://bugs.webkit.org/show_bug.cgi?id=170834
+
+  -->
+
+  <link rel="match" href="reference/background-size-042-ref.html">
+
+  <meta content="" name="flags">
+  <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert">
+
+  <style>
+  div
+    {
+      background-clip: content-box; /* border-box is the initial background-clip value */
+      background-image: linear-gradient(orange, blue);
+      background-origin: border-box; /* padding-box is the initial background-origin value */
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 50% auto;
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+  </style>
+
+  <div></div>
diff --git a/css/css-backgrounds/background-size-043.html b/css/css-backgrounds/background-size-043.html
new file mode 100644
index 00000000000000..53a3217f070980
--- /dev/null
+++ b/css/css-backgrounds/background-size-043.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Backgrounds and Borders Test: background-size with &lt;length&gt; value and 'auto' and image with no intrinsic size and no intrinsic ratio</title>
+
+  <!--
+  Credit should go to Henrik Andersson
+  for originally reporting this issue.
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
+
+  <!--
+
+  [css-backgrounds] [css-images] Interop for sizing gradients with only width
+  http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html
+
+  Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect
+  https://bugs.chromium.org/p/chromium/issues/detail?id=935057
+
+  Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered
+  https://bugs.webkit.org/show_bug.cgi?id=170834
+
+  -->
+
+  <link rel="match" href="reference/background-size-043-ref.html">
+
+  <meta content="" name="flags">
+  <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert">
+
+  <style>
+  div
+    {
+      background-clip: content-box; /* border-box is the initial background-clip value */
+      background-image: url("support/orange-intrinsic-none.svg");
+      background-origin: border-box; /* padding-box is the initial background-origin value */
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 200px auto;
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+  </style>
+
+  <div></div>
diff --git a/css/css-backgrounds/background-size-044.html b/css/css-backgrounds/background-size-044.html
new file mode 100644
index 00000000000000..4b2ef3d8ff7792
--- /dev/null
+++ b/css/css-backgrounds/background-size-044.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Backgrounds and Borders Test: background-size with &lt;percent&gt; value and 'auto' and image with no intrinsic size and no intrinsic ratio</title>
+
+  <!--
+  Credit should go to Henrik Andersson
+  for originally reporting this issue.
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size">
+
+  <!--
+
+  [css-backgrounds] [css-images] Interop for sizing gradients with only width
+  http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html
+
+  Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect
+  https://bugs.chromium.org/p/chromium/issues/detail?id=935057
+
+  Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered
+  https://bugs.webkit.org/show_bug.cgi?id=170834
+
+  -->
+
+  <link rel="match" href="reference/background-size-044-ref.html">
+
+  <meta content="" name="flags">
+  <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert">
+
+  <style>
+  div
+    {
+      background-clip: content-box; /* border-box is the initial background-clip value */
+      background-image: url("support/orange-intrinsic-none.svg");
+      background-origin: border-box; /* padding-box is the initial background-origin value */
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 50% auto;
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+  </style>
+
+  <div></div>
diff --git a/css/css-backgrounds/reference/background-size-041-ref.html b/css/css-backgrounds/reference/background-size-041-ref.html
new file mode 100644
index 00000000000000..9da6b1f30d390d
--- /dev/null
+++ b/css/css-backgrounds/reference/background-size-041-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div#black-border
+    {
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+
+  div#gradient
+    {
+      background-image: linear-gradient(orange, blue);
+      height: 120%; /* computes to 480px */
+      margin: -40px auto 0px;
+      /* the gradient block is horizontally centered inside div#black-border */
+      width: 200px;
+    }
+
+  div#mask1 , div#mask2
+    {
+      background-color: black;
+      height: 40px;
+      left: 8px;
+      position: absolute;
+      width: 480px;
+    }
+
+  div#mask1
+    {
+      top: 8px;
+    }
+
+  div#mask2
+    {
+      top: 448px; /* 8px + 40px + 400px */
+    }
+
+  </style>
+
+  <div id="black-border"><div id="gradient"></div></div>
+
+  <div id="mask1"></div>
+
+  <div id="mask2"></div>
diff --git a/css/css-backgrounds/reference/background-size-042-ref.html b/css/css-backgrounds/reference/background-size-042-ref.html
new file mode 100644
index 00000000000000..3f7ca3c382cf22
--- /dev/null
+++ b/css/css-backgrounds/reference/background-size-042-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div#black-border
+    {
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+
+  div#gradient
+    {
+      background-image: linear-gradient(orange, blue);
+      height: 120%; /* computes to 480px */
+      margin: -40px auto 0px;
+      /* the gradient block is horizontally centered inside div#black-border */
+      width: 240px;
+    }
+
+  div#mask1 , div#mask2
+    {
+      background-color: black;
+      height: 40px;
+      left: 8px;
+      position: absolute;
+      width: 480px;
+    }
+
+  div#mask1
+    {
+      top: 8px;
+    }
+
+  div#mask2
+    {
+      top: 448px; /* 8px + 40px + 400px */
+    }
+
+  </style>
+
+  <div id="black-border"><div id="gradient"></div></div>
+
+  <div id="mask1"></div>
+
+  <div id="mask2"></div>
diff --git a/css/css-backgrounds/reference/background-size-043-ref.html b/css/css-backgrounds/reference/background-size-043-ref.html
new file mode 100644
index 00000000000000..b70e6b4aad9fe5
--- /dev/null
+++ b/css/css-backgrounds/reference/background-size-043-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div#black-border
+    {
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+
+  div#inner-orange
+    {
+      background-color: orange;
+      border-left: blue solid 16px;
+      border-right: blue solid 16px;
+      height: 100%;
+      margin: 0px auto;
+      /* the orange block is horizontally centered inside div#black-border */
+      width: 168px; /* 200 - 32 == 168 */
+    }
+  </style>
+
+  <div id="black-border"><div id="inner-orange"></div></div>
diff --git a/css/css-backgrounds/reference/background-size-044-ref.html b/css/css-backgrounds/reference/background-size-044-ref.html
new file mode 100644
index 00000000000000..13fe09126ec23a
--- /dev/null
+++ b/css/css-backgrounds/reference/background-size-044-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div#black-border
+    {
+      border: black solid 40px;
+      height: 400px;
+      width: 400px;
+    }
+
+  div#inner-orange
+    {
+      background-color: orange;
+      border-left: blue solid 16px;
+      border-right: blue solid 16px;
+      height: 100%;
+      margin: 0px auto;
+      /* the orange block is horizontally centered inside div#black-border */
+      width: 208px; /* [(40 + 400 + 40) / 2 ] - 32 == 208px */
+    }
+  </style>
+
+  <div id="black-border"><div id="inner-orange"></div></div>
diff --git a/css/css-backgrounds/support/orange-intrinsic-none.svg b/css/css-backgrounds/support/orange-intrinsic-none.svg
new file mode 100644
index 00000000000000..9891bee4799f79
--- /dev/null
+++ b/css/css-backgrounds/support/orange-intrinsic-none.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none">
+  <rect width="100%" height="100%" fill="orange" stroke="blue" stroke-width="32" />
+</svg>
\ No newline at end of file
