mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-28 13:18:19 +00:00
LibWeb: Serialize background-size auto correctly
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
When `background-size` is `auto` in both axes, the `auto` value is no longer repeated.
This commit is contained in:
Tim Ledbetter
Jelle Raaijmakers
parent
c4ceec9296
commit
e36df5ea0a
Notes:
github-actions[bot]
2025-08-02 06:52:35 +00:00
Author: https://github.com/tcl3
Commit: e36df5ea0a
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5677
Reviewed-by: https://github.com/gmta ✅
7 changed files with 318 additions and 6 deletions
|
|
@ -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()));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 auto'
|
||||
'-webkit-background-size': 'auto auto'
|
||||
'WebkitBackgroundSize': 'auto'
|
||||
'webkitBackgroundSize': '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'
|
||||
'background-size': 'auto auto'
|
||||
'backgroundSize': 'auto'
|
||||
'background-size': 'auto'
|
||||
'blockSize': '0px'
|
||||
'block-size': '0px'
|
||||
'border': '0px rgb(0, 0, 0)'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue