LibWeb: Serialize background-size auto correctly

When `background-size` is `auto` in both axes, the `auto` value is no
longer repeated.

Libraries/LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.cpp

@@ -21,6 +21,8 @@ BackgroundSizeStyleValue::~BackgroundSizeStyleValue() = default;
 
 String BackgroundSizeStyleValue::to_string(SerializationMode) const
 {
+    if (m_properties.size_x.is_auto() && m_properties.size_y.is_auto())
+        return "auto"_string;
     return MUST(String::formatted("{} {}", m_properties.size_x.to_string(), m_properties.size_y.to_string()));
 }
 

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -45,9 +45,9 @@ All supported properties and their default values exposed from CSSStylePropertie
 'WebkitBackgroundOrigin': 'padding-box'
 'webkitBackgroundOrigin': 'padding-box'
 '-webkit-background-origin': 'padding-box'
-'WebkitBackgroundSize': 'auto auto'
+'WebkitBackgroundSize': 'auto'
-'webkitBackgroundSize': 'auto auto'
+'webkitBackgroundSize': 'auto'
-'-webkit-background-size': 'auto auto'
+'-webkit-background-size': 'auto'
 'WebkitBorderBottomLeftRadius': '0px'
 'webkitBorderBottomLeftRadius': '0px'
 '-webkit-border-bottom-left-radius': '0px'
@@ -199,8 +199,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'background-position-y': '0%'
 'backgroundRepeat': 'repeat'
 'background-repeat': 'repeat'
-'backgroundSize': 'auto auto'
+'backgroundSize': 'auto'
-'background-size': 'auto auto'
+'background-size': 'auto'
 'blockSize': '0px'
 'block-size': '0px'
 'border': '0px rgb(0, 0, 0)'

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -88,7 +88,7 @@ background-origin: padding-box
 background-position-x: 0%
 background-position-y: 0%
 background-repeat: repeat
-background-size: auto auto
+background-size: auto
 block-size: 1365px
 border-block-end-color: rgb(0, 0, 0)
 border-block-end-style: none

Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/background-size-001.txt

@@ -0,0 +1,25 @@
+Harness status: OK
+
+Found 20 tests
+
+20 Pass
+Pass	background-size_initial
+Pass	background-size_auto
+Pass	background-size_cover
+Pass	background-size_contain
+Pass	background-size_length_zero
+Pass	background-size_length_negative_zero
+Pass	background-size_length_positive_zero
+Pass	background-size_length_normal
+Pass	background-size_percentage_min
+Pass	background-size_percentage_normal
+Pass	background-size_percentage_max
+Pass	background-size_auto_auto
+Pass	background-size_auto_length
+Pass	background-size_auto_percentage
+Pass	background-size_length_auto
+Pass	background-size_length_length
+Pass	background-size_length_percentage
+Pass	background-size_percentage_auto
+Pass	background-size_percentage_length
+Pass	background-size_percentage_percentage

Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/inheritance.sub.txt

@@ -0,0 +1,69 @@
+Harness status: OK
+
+Found 64 tests
+
+64 Pass
+Pass	Property background-attachment has initial value scroll
+Pass	Property background-attachment does not inherit
+Pass	Property background-clip has initial value border-box
+Pass	Property background-clip does not inherit
+Pass	Property background-color has initial value rgba(0, 0, 0, 0)
+Pass	Property background-color does not inherit
+Pass	Property background-image has initial value none
+Pass	Property background-image does not inherit
+Pass	Property background-origin has initial value padding-box
+Pass	Property background-origin does not inherit
+Pass	Property background-position has initial value 0% 0%
+Pass	Property background-position does not inherit
+Pass	Property background-position-x has initial value 0%
+Pass	Property background-position-x does not inherit
+Pass	Property background-position-y has initial value 0%
+Pass	Property background-position-y does not inherit
+Pass	Property background-repeat has initial value repeat
+Pass	Property background-repeat does not inherit
+Pass	Property background-size has initial value auto
+Pass	Property background-size does not inherit
+Pass	Property border-bottom-color has initial value rgb(2, 3, 4)
+Pass	Property border-bottom-color does not inherit
+Pass	Property border-bottom-left-radius has initial value 0px
+Pass	Property border-bottom-left-radius does not inherit
+Pass	Property border-bottom-right-radius has initial value 0px
+Pass	Property border-bottom-right-radius does not inherit
+Pass	Property border-bottom-style has initial value none
+Pass	Property border-bottom-style does not inherit
+Pass	Property border-bottom-width has initial value 3px
+Pass	Property border-bottom-width does not inherit
+Pass	Property border-image-outset has initial value 0
+Pass	Property border-image-outset does not inherit
+Pass	Property border-image-repeat has initial value stretch
+Pass	Property border-image-repeat does not inherit
+Pass	Property border-image-slice has initial value 100%
+Pass	Property border-image-slice does not inherit
+Pass	Property border-image-source has initial value none
+Pass	Property border-image-source does not inherit
+Pass	Property border-image-width has initial value 1
+Pass	Property border-image-width does not inherit
+Pass	Property border-left-color has initial value rgb(2, 3, 4)
+Pass	Property border-left-color does not inherit
+Pass	Property border-left-style has initial value none
+Pass	Property border-left-style does not inherit
+Pass	Property border-left-width has initial value 3px
+Pass	Property border-left-width does not inherit
+Pass	Property border-right-color has initial value rgb(2, 3, 4)
+Pass	Property border-right-color does not inherit
+Pass	Property border-right-style has initial value none
+Pass	Property border-right-style does not inherit
+Pass	Property border-right-width has initial value 3px
+Pass	Property border-right-width does not inherit
+Pass	Property border-top-color has initial value rgb(2, 3, 4)
+Pass	Property border-top-color does not inherit
+Pass	Property border-top-left-radius has initial value 0px
+Pass	Property border-top-left-radius does not inherit
+Pass	Property border-top-right-radius has initial value 0px
+Pass	Property border-top-right-radius does not inherit
+Pass	Property border-top-style has initial value none
+Pass	Property border-top-style does not inherit
+Pass	Property border-top-width has initial value 3px
+Pass	Property border-top-width does not inherit
+Pass	Property box-shadow has initial value none
+Pass	Property box-shadow does not inherit

Tests/LibWeb/Text/input/wpt-import/css/css-backgrounds/background-size-001.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Backgrounds and Borders Test: background-size - initial and supported values</title>
+    <link rel="author" title="Intel" href="http://www.intel.com" />
+    <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
+    <meta name="flags" content="dom" />
+    <meta name="assert" content="Check if background-size initial value is auto and supports values auto, cover and contain" />
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+  </head>
+  <body>
+    <div id="log"></div>
+    <div id="test"></div>
+    <script>
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "auto", "background-size initial value");
+        }, "background-size_initial");
+
+        document.getElementById("test").style.backgroundSize = "auto";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "auto", "background-size supporting value");
+        }, "background-size_auto");
+
+        document.getElementById("test").style.backgroundSize = "cover";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "cover", "background-size supporting value");
+        }, "background-size_cover");
+
+        document.getElementById("test").style.backgroundSize = "contain";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "contain", "background-size supporting value");
+        }, "background-size_contain");
+
+        document.getElementById("test").style.backgroundSize = "0px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "0px auto", "background-size supporting value");
+        }, "background-size_length_zero");
+
+        document.getElementById("test").style.backgroundSize = "-0px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "0px auto", "background-size supporting value");
+        }, "background-size_length_negative_zero");
+
+        document.getElementById("test").style.backgroundSize = "+0px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "0px auto", "background-size supporting value");
+        }, "background-size_length_positive_zero");
+
+        document.getElementById("test").style.backgroundSize = "15px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "15px auto", "background-size supporting value");
+        }, "background-size_length_normal");
+
+        document.getElementById("test").style.backgroundSize = "0%";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "0% auto", "background-size supporting value");
+        }, "background-size_percentage_min");
+
+        document.getElementById("test").style.backgroundSize = "50%";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "50% auto", "background-size supporting value");
+        }, "background-size_percentage_normal");
+
+        document.getElementById("test").style.backgroundSize = "100%";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "100% auto", "background-size supporting value");
+        }, "background-size_percentage_max");
+
+        document.getElementById("test").style.backgroundSize = "auto auto";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "auto", "background-size supporting value");
+        }, "background-size_auto_auto");
+
+        document.getElementById("test").style.backgroundSize = "auto 15px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "auto 15px", "background-size supporting value");
+        }, "background-size_auto_length");
+
+        document.getElementById("test").style.backgroundSize = "auto 50%";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "auto 50%", "background-size supporting value");
+        }, "background-size_auto_percentage");
+
+        document.getElementById("test").style.backgroundSize = "15px auto";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "15px auto", "background-size supporting value");
+        }, "background-size_length_auto");
+
+        document.getElementById("test").style.backgroundSize = "15px 15px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "15px 15px", "background-size supporting value");
+        }, "background-size_length_length");
+
+        document.getElementById("test").style.backgroundSize = "15px 50%";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "15px 50%", "background-size supporting value");
+        }, "background-size_length_percentage");
+
+        document.getElementById("test").style.backgroundSize = "50% auto";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "50% auto", "background-size supporting value");
+        }, "background-size_percentage_auto");
+
+        document.getElementById("test").style.backgroundSize = "50% 15px";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "50% 15px", "background-size supporting value");
+        }, "background-size_percentage_length");
+
+        document.getElementById("test").style.backgroundSize = "50% 50%";
+        test(function() {
+            assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
+                "50% 50%", "background-size supporting value");
+        }, "background-size_percentage_percentage");
+    </script>
+  </body>
+</html>

Tests/LibWeb/Text/input/wpt-import/css/css-backgrounds/inheritance.sub.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Backgrounds and Borders properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#property-index">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#property-index">
+<meta name="assert" content="Properties inherit or not according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="reference"></div>
+<!-- container and target are used by the functions in inheritance-testcommon.js -->
+<div id="container">
+  <div id="target"></div>
+</div>
+<style>
+  #reference {
+    column-rule-style: dotted; /* Avoid column-rule-width computed style 0px */
+    column-rule-width: medium;
+  }
+  #container {
+    border-style: solid; /* Avoid border-*-width computed style 0px */
+  }
+  #target {
+    border-style: solid; /* Avoid border-*-width computed style 0px */
+  }
+</style>
+<script>
+const transparentColor = 'rgba(0, 0, 0, 0)'; // https://www.w3.org/TR/css-color-3/#transparent
+const mediumWidth = '3px'; // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-medium
+const currentColor = 'rgb(2, 3, 4)';
+container.style.color = currentColor;
+
+
+// assert_not_inherited accepts: property name, expected initial value, another value the property supports.
+assert_not_inherited('background-attachment', 'scroll', 'fixed');
+assert_not_inherited('background-clip', 'border-box', 'padding-box');
+assert_not_inherited('background-color', transparentColor, 'rgb(42, 53, 64)');
+assert_not_inherited('background-image', 'none', 'url("https://wpt.live/")');
+assert_not_inherited('background-origin', 'padding-box', 'content-box');
+assert_not_inherited('background-position', '0% 0%', '10px 20px');
+assert_not_inherited('background-position-x', '0%', '10px');
+assert_not_inherited('background-position-y', '0%', '20px');
+assert_not_inherited('background-repeat', 'repeat', 'space round');
+assert_not_inherited('background-size', 'auto', 'contain');
+
+assert_not_inherited('border-bottom-color', currentColor, 'rgb(42, 53, 64)');
+assert_not_inherited('border-bottom-left-radius', '0px', '5px 7%');
+assert_not_inherited('border-bottom-right-radius', '0px', '5px 7%');
+assert_not_inherited('border-bottom-style', 'none', 'dashed');
+assert_not_inherited('border-bottom-width', mediumWidth, '10px');
+
+assert_not_inherited('border-image-outset', '0', '1px 2px 3px 4px');
+assert_not_inherited('border-image-repeat', 'stretch', 'repeat round');
+assert_not_inherited('border-image-slice', '100%', '1% 2% 3% 4% fill');
+assert_not_inherited('border-image-source', 'none', 'url("https://wpt.live/")');
+assert_not_inherited('border-image-width', '1', '1px 2px 3px 4px');
+
+assert_not_inherited('border-left-color', currentColor, 'rgb(42, 53, 64)');
+assert_not_inherited('border-left-style', 'none', 'dashed');
+assert_not_inherited('border-left-width', mediumWidth, '10px');
+
+assert_not_inherited('border-right-color', currentColor, 'rgb(42, 53, 64)');
+assert_not_inherited('border-right-style', 'none', 'dashed');
+assert_not_inherited('border-right-width', mediumWidth, '10px');
+
+assert_not_inherited('border-top-color', currentColor, 'rgb(42, 53, 64)');
+assert_not_inherited('border-top-left-radius', '0px', '5px 7%');
+assert_not_inherited('border-top-right-radius', '0px', '5px 7%');
+assert_not_inherited('border-top-style', 'none', 'dashed');
+assert_not_inherited('border-top-width', mediumWidth, '10px');
+
+assert_not_inherited('box-shadow', 'none', 'rgb(42, 53, 64) 1px 2px 3px 4px');
+</script>
+</body>
+</html>