mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Add support for the 'all' CSS property
The "longhands" array is populated in the code generator to avoid the overhead of manually maintaining the list in Properties.json There is one subtest that still fails in 'cssstyledeclaration-csstext-all-shorthand', this is related to us not maintaining the relative order of CSS declarations for custom vs non-custom properties.
This commit is contained in:
Callum Law
Sam Atkins
parent
0762d57f65
commit
d31a58a7d6
Notes:
github-actions[bot]
2025-06-12 14:26:43 +00:00
Author: https://github.com/Calme1709
Commit: d31a58a7d6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5039
Reviewed-by: https://github.com/AtkinsSJ ✅
16 changed files with 199 additions and 82 deletions
|
|
@ -152,6 +152,7 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'align-items': 'normal'
|
||||
'alignSelf': 'auto'
|
||||
'align-self': 'auto'
|
||||
'all': ''
|
||||
'animation': 'none'
|
||||
'animationDelay': '0s'
|
||||
'animation-delay': '0s'
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
div { }
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 6 tests
|
||||
|
||||
6 Pass
|
||||
Pass getPropertyValue('all') returns empty string
|
||||
Pass getPropertyValue('all') returns css-wide keyword if possible
|
||||
Pass getPropertyValue('all') returns empty string when single property overriden
|
||||
Pass setProperty('all') sets all property values
|
||||
Pass removeProperty('all') removes all declarations affected by 'all'
|
||||
Pass removeProperty('all') removes an 'all' declaration
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 6 tests
|
||||
|
||||
5 Pass
|
||||
1 Fail
|
||||
Pass 'all' shorthand alone
|
||||
Pass 'all' shorthand with 'width' and 'height'
|
||||
Pass 'all' shorthand with 'direction' and 'unicode-bidi'
|
||||
Fail 'all' shorthand with 'width', 'height' and custom properties
|
||||
Pass 'all' shorthand with all longhands
|
||||
Pass all:initial should not exclude custom from cssText
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass CSSStyleDeclaration.removeProperty("all")
|
||||
|
|
@ -2,7 +2,6 @@ Harness status: OK
|
|||
|
||||
Found 2 tests
|
||||
|
||||
1 Pass
|
||||
1 Fail
|
||||
Fail Specified style
|
||||
2 Pass
|
||||
Pass Specified style
|
||||
Pass Computed style
|
||||
14
Tests/LibWeb/Text/input/css/all-with-invalid-value.html
Normal file
14
Tests/LibWeb/Text/input/css/all-with-invalid-value.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style>
|
||||
div {
|
||||
all: red;
|
||||
}
|
||||
</style>
|
||||
<script src="../include.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
println(document.styleSheets[0].cssRules[0].cssText);
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM Test: Passing "all" shorthand to property methods</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#all-shorthand">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const style = document.createElement("div").style;
|
||||
|
||||
test((t) => {
|
||||
t.add_cleanup(() => { style.cssText = ""; } );
|
||||
style.cssText = "width: 50px";
|
||||
assert_equals(style.getPropertyValue("all"), "");
|
||||
}, "getPropertyValue('all') returns empty string");
|
||||
|
||||
test((t) => {
|
||||
t.add_cleanup(() => { style.cssText = ""; } );
|
||||
style.cssText = "all: revert";
|
||||
assert_equals(style.getPropertyValue("all"), "revert");
|
||||
}, "getPropertyValue('all') returns css-wide keyword if possible");
|
||||
|
||||
test((t) => {
|
||||
t.add_cleanup(() => { style.cssText = ""; } );
|
||||
style.cssText = "all: revert; width: 50px";
|
||||
assert_equals(style.getPropertyValue("all"), "");
|
||||
}, "getPropertyValue('all') returns empty string when single property overriden");
|
||||
|
||||
test((t) => {
|
||||
t.add_cleanup(() => { style.cssText = ""; } );
|
||||
style.setProperty("all", "revert");
|
||||
assert_equals(style.getPropertyValue("width"), "revert");
|
||||
assert_equals(style.getPropertyValue("color"), "revert");
|
||||
}, "setProperty('all') sets all property values");
|
||||
|
||||
test((t) => {
|
||||
t.add_cleanup(() => { style.cssText = ""; } );
|
||||
style.cssText = "width: 50px; color: green; direction: rtl";
|
||||
assert_equals(style.getPropertyValue("width"), "50px");
|
||||
assert_equals(style.getPropertyValue("color"), "green");
|
||||
assert_equals(style.getPropertyValue("direction"), "rtl");
|
||||
style.removeProperty("all");
|
||||
assert_equals(style.getPropertyValue("width"), "");
|
||||
assert_equals(style.getPropertyValue("color"), "");
|
||||
assert_equals(style.getPropertyValue("direction"), "rtl");
|
||||
}, "removeProperty('all') removes all declarations affected by 'all'");
|
||||
|
||||
test((t) => {
|
||||
t.add_cleanup(() => { style.cssText = ""; } );
|
||||
style.cssText = "all: revert";
|
||||
style.removeProperty("all");
|
||||
assert_equals(style.getPropertyValue("all"), "");
|
||||
}, "removeProperty('all') removes an 'all' declaration");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM test: serialization of the 'all' shorthand in cssText</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstyledeclaration-csstext">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const style = document.createElement("div").style;
|
||||
|
||||
test(function() {
|
||||
style.cssText = "all: inherit";
|
||||
assert_equals(style.cssText, "all: inherit;");
|
||||
}, "'all' shorthand alone");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "width: 100px; all: inherit; height: inherit";
|
||||
assert_equals(style.cssText, "all: inherit;");
|
||||
}, "'all' shorthand with 'width' and 'height'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "direction: ltr; all: inherit; unicode-bidi: plaintext";
|
||||
assert_equals(style.cssText, "direction: ltr; all: inherit; unicode-bidi: plaintext;");
|
||||
}, "'all' shorthand with 'direction' and 'unicode-bidi'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "width: 100px; --a: a; all: inherit; --b: b; height: inherit";
|
||||
assert_equals(style.cssText, "--a: a; all: inherit; --b: b;");
|
||||
}, "'all' shorthand with 'width', 'height' and custom properties");
|
||||
|
||||
test(function() {
|
||||
let cssText = "all: inherit; ";
|
||||
for (let longhand of getComputedStyle(document.documentElement)) {
|
||||
cssText += longhand + ": inherit; ";
|
||||
}
|
||||
style.cssText = cssText;
|
||||
if (CSS.supports("interactivity:inert")) {
|
||||
assert_equals(style.cssText, "all: inherit; direction: inherit; interactivity: inherit; unicode-bidi: inherit;");
|
||||
} else {
|
||||
assert_equals(style.cssText, "all: inherit; direction: inherit; unicode-bidi: inherit;");
|
||||
}
|
||||
}, "'all' shorthand with all longhands");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "--foo: bar; all: initial";
|
||||
assert_true(style.cssText.includes("--foo: bar"), "cssText serialization includes custom property");
|
||||
}, "all:initial should not exclude custom from cssText");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSSStyleDeclaration.removeProperty("all")</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstyledeclaration-removeproperty">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(function() {
|
||||
let style = document.createElement("div").style;
|
||||
style.width = "40px";
|
||||
assert_equals(style.length, 1, "setter should work as expected");
|
||||
style.removeProperty("all");
|
||||
assert_equals(style.length, 0, "all is a shorthand of all properties, so should remove the property");
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue