eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-03 13:02:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb/CSS: Serialize shorthands with var() to original value

Browse Source
This commit is contained in:
Tim Ledbetter
2026-01-14 00:39:43 +00:00
committed by Sam Atkins
parent 4608987da9
commit 40d217bde2
Notes: github-actions[bot] 2026-01-15 11:51:47 +00:00 
Author: https://github.com/tcl3
Commit: https://github.com/LadybirdBrowser/ladybird/commit/40d217bde24
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7462
Reviewed-by: https://github.com/AtkinsSJ ✅
13 changed files with 181 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Tests/LibWeb/Text/input/wpt-import/css/css-variables/variable-reference-shorthands-cssom.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS variable references - shorthand properties - via CSSOM</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#serializing-custom-props">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="target"></div>
<script type="text/javascript">
"use strict";
function runTest() {
var target = document.getElementById("target");
target.style.setProperty("margin", "var(--prop)");
assert_equals(target.style.margin, "var(--prop)", "margin property value after calling setProperty");
assert_equals(target.style.getPropertyValue("margin"), "var(--prop)", "getPropertyValue('margin') after calling setProperty");
target.style.removeProperty("margin");
assert_equals(target.style.margin, "", "margin property value after calling removeProperty");
assert_equals(target.style.getPropertyValue("margin"), "", "getPropertyValue('margin') after calling removeProperty");
}
test(runTest);
</script>
</body>
</html>

56
Tests/LibWeb/Text/input/wpt-import/css/css-variables/variable-reference-shorthands.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Parse, store, and serialize CSS variable references - shorthand properties</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#serializing-custom-props">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="target1" style="margin: var(--prop); margin-top: 10px"></div>
<div id="target2" style="margin: var(--prop) !important; margin-top: 10px"></div>
<div id="target3" style="margin: var(--prop); margin-top: 10px !important"></div>
<div id="target4" style="background: var(--prop);"></div>
<script type="text/javascript">
"use strict";
var testcases = [
{ element: "target1", propertyName: "margin", expectedPropertyValue: "" },
{ element: "target1", propertyName: "margin-left", expectedPropertyValue: "" },
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "10px" },
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "" },
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "" },
{ element: "target2", propertyName: "margin", expectedPropertyValue: "var(--prop)" },
{ element: "target2", propertyName: "margin-left", expectedPropertyValue: "" },
{ element: "target2", propertyName: "margin-top", expectedPropertyValue: "" },
{ element: "target2", propertyName: "margin-right", expectedPropertyValue: "" },
{ element: "target2", propertyName: "margin-bottom", expectedPropertyValue: "" },
{ element: "target3", propertyName: "margin", expectedPropertyValue: "" },
{ element: "target3", propertyName: "margin-left", expectedPropertyValue: "" },
{ element: "target3", propertyName: "margin-top", expectedPropertyValue: "10px" },
{ element: "target3", propertyName: "margin-right", expectedPropertyValue: "" },
{ element: "target3", propertyName: "margin-bottom", expectedPropertyValue: "" },
{ element: "target4", propertyName: "background", expectedPropertyValue: "var(--prop)" }
];
testcases.forEach(function (testcase) {
test( function () {
var div = document.getElementById(testcase.element);
var actualPropertyValue = div.style.getPropertyValue(testcase.propertyName).trim();
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
}, testcase.element + " " + testcase.propertyName);
});
</script>
</body>
</html>