mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-17 13:39:25 +00:00
LibWeb: Collapse & trim whitespace when serializing UnresolvedStyleValue
This commit is contained in:
Callum Law
Sam Atkins
parent
a405d6df67
commit
9ee9be720c
Notes:
github-actions[bot]
2025-09-26 06:31:11 +00:00
Author: https://github.com/Calme1709
Commit: 9ee9be720c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6307
Reviewed-by: https://github.com/AtkinsSJ ✅
6 changed files with 202 additions and 9 deletions
|
|
@ -8,6 +8,7 @@
|
||||||
#include <AK/Utf8View.h>
|
#include <AK/Utf8View.h>
|
||||||
#include <LibWeb/CSS/Parser/ComponentValue.h>
|
#include <LibWeb/CSS/Parser/ComponentValue.h>
|
||||||
#include <LibWeb/CSS/Serialize.h>
|
#include <LibWeb/CSS/Serialize.h>
|
||||||
|
#include <LibWeb/Infra/Strings.h>
|
||||||
|
|
||||||
namespace Web::CSS {
|
namespace Web::CSS {
|
||||||
|
|
||||||
|
|
@ -269,7 +270,7 @@ String serialize_a_series_of_component_values(ReadonlySpan<Parser::ComponentValu
|
||||||
{
|
{
|
||||||
// FIXME: There are special rules here where we should insert a comment between certain tokens. Do that!
|
// FIXME: There are special rules here where we should insert a comment between certain tokens. Do that!
|
||||||
if (insert_whitespace == InsertWhitespace::Yes)
|
if (insert_whitespace == InsertWhitespace::Yes)
|
||||||
return MUST(String::join(' ', component_values));
|
return MUST(Infra::strip_and_collapse_whitespace(MUST(String::join(' ', component_values))));
|
||||||
return MUST(String::join(""sv, component_values));
|
return MUST(String::join(""sv, component_values));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@ Harness status: OK
|
||||||
|
|
||||||
Found 139 tests
|
Found 139 tests
|
||||||
|
|
||||||
128 Pass
|
130 Pass
|
||||||
11 Fail
|
9 Fail
|
||||||
Pass CSS Values and Units Test: attr
|
Pass CSS Values and Units Test: attr
|
||||||
Fail CSS Values and Units Test: attr 1
|
Fail CSS Values and Units Test: attr 1
|
||||||
Pass CSS Values and Units Test: attr 2
|
Pass CSS Values and Units Test: attr 2
|
||||||
|
|
@ -34,7 +34,7 @@ Pass CSS Values and Units Test: attr 26
|
||||||
Fail CSS Values and Units Test: attr 27
|
Fail CSS Values and Units Test: attr 27
|
||||||
Pass CSS Values and Units Test: attr 28
|
Pass CSS Values and Units Test: attr 28
|
||||||
Pass CSS Values and Units Test: attr 29
|
Pass CSS Values and Units Test: attr 29
|
||||||
Fail CSS Values and Units Test: attr 30
|
Pass CSS Values and Units Test: attr 30
|
||||||
Pass CSS Values and Units Test: attr 31
|
Pass CSS Values and Units Test: attr 31
|
||||||
Pass CSS Values and Units Test: attr 32
|
Pass CSS Values and Units Test: attr 32
|
||||||
Pass CSS Values and Units Test: attr 33
|
Pass CSS Values and Units Test: attr 33
|
||||||
|
|
@ -55,7 +55,7 @@ Pass CSS Values and Units Test: attr 47
|
||||||
Pass CSS Values and Units Test: attr 48
|
Pass CSS Values and Units Test: attr 48
|
||||||
Pass CSS Values and Units Test: attr 49
|
Pass CSS Values and Units Test: attr 49
|
||||||
Fail CSS Values and Units Test: attr 50
|
Fail CSS Values and Units Test: attr 50
|
||||||
Fail CSS Values and Units Test: attr 51
|
Pass CSS Values and Units Test: attr 51
|
||||||
Pass CSS Values and Units Test: attr 52
|
Pass CSS Values and Units Test: attr 52
|
||||||
Pass CSS Values and Units Test: attr 53
|
Pass CSS Values and Units Test: attr 53
|
||||||
Pass CSS Values and Units Test: attr 54
|
Pass CSS Values and Units Test: attr 54
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@ Harness status: OK
|
||||||
|
|
||||||
Found 5 tests
|
Found 5 tests
|
||||||
|
|
||||||
2 Pass
|
3 Pass
|
||||||
3 Fail
|
2 Fail
|
||||||
Pass Sanity check
|
Pass Sanity check
|
||||||
Pass Attribute in null-namespace is substituted
|
Pass Attribute in null-namespace is substituted
|
||||||
Fail Fallback is taken when attribute does not exist in null-namespace
|
Pass Fallback is taken when attribute does not exist in null-namespace
|
||||||
Fail Attribute in null-namespace is substituted (JS)
|
Fail Attribute in null-namespace is substituted (JS)
|
||||||
Fail Fallback is taken when attribute does not does exist in null-namespace (JS)
|
Fail Fallback is taken when attribute does not does exist in null-namespace (JS)
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 31 tests
|
||||||
|
|
||||||
|
30 Pass
|
||||||
|
1 Fail
|
||||||
|
Pass target1 --var2
|
||||||
|
Pass target1 margin-top
|
||||||
|
Pass target1 margin-right
|
||||||
|
Pass target1 margin-bottom
|
||||||
|
Pass target1 margin-left
|
||||||
|
Pass target2parent --var1
|
||||||
|
Pass target2parent --var2
|
||||||
|
Pass target2 --var1
|
||||||
|
Pass target2 --var2
|
||||||
|
Pass target3 --var1
|
||||||
|
Pass target3 --var2
|
||||||
|
Pass target4 --varA
|
||||||
|
Pass target4 --varB
|
||||||
|
Pass target4 --varC
|
||||||
|
Pass target5 --varA
|
||||||
|
Pass target5 --varB
|
||||||
|
Pass target5 --varC
|
||||||
|
Pass target6 --varA
|
||||||
|
Pass target6 --varB
|
||||||
|
Fail target6 --varC
|
||||||
|
Pass target7 --varA
|
||||||
|
Pass target7 --varB
|
||||||
|
Pass target7 --varC
|
||||||
|
Pass target8 --varA
|
||||||
|
Pass target8 --varB
|
||||||
|
Pass target9 --varA
|
||||||
|
Pass target9 --varB
|
||||||
|
Pass target9 --varC
|
||||||
|
Pass target10 --varA
|
||||||
|
Pass target10 --varB
|
||||||
|
Pass target10 --varC
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Testing substituting variable references inside of variable declerations</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/#using-variables">
|
||||||
|
|
||||||
|
<script src="../../resources/testharness.js"></script>
|
||||||
|
<script src="../../resources/testharnessreport.js"></script>
|
||||||
|
<style>
|
||||||
|
#target1 {
|
||||||
|
margin: var(--var2);
|
||||||
|
--var2: var(--var1) 10px;
|
||||||
|
--var1: var(--var0) 13px 17px;
|
||||||
|
--var0: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#target2parent {
|
||||||
|
--var2: var(--var1, fallback);
|
||||||
|
--var1: var(--var2, fallback);
|
||||||
|
}
|
||||||
|
#target2 {
|
||||||
|
--var1: good;
|
||||||
|
}
|
||||||
|
|
||||||
|
#target3 {
|
||||||
|
--var2: var(--var1, 3px);
|
||||||
|
--var1: var(--var0, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target4 {
|
||||||
|
--varA: var(--varB);
|
||||||
|
--varB: var(--varA);
|
||||||
|
--varC: var(--varB,13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target5 {
|
||||||
|
--varA: var(--varB);
|
||||||
|
--varB: var(--varA) var(--varC);
|
||||||
|
--varC: var(--varB,13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target6 {
|
||||||
|
--varA: var(--varB);
|
||||||
|
--varB: var(--varA) var(--varDoesNotExist,var(--varC));
|
||||||
|
--varC: var(--varB,13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target7 {
|
||||||
|
--varDoesExist: 5px;
|
||||||
|
--varA: var(--varB);
|
||||||
|
--varB: var(--varA) var(--varDoesExist,var(--varC));
|
||||||
|
--varC: var(--varB,13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target8 {
|
||||||
|
--varA: var(--varA, 9px);
|
||||||
|
--varB: var(--varA, 7px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target9 {
|
||||||
|
--varA: good;
|
||||||
|
--varB: very var(--varA, var(--varC));
|
||||||
|
--varC: var(--varB);
|
||||||
|
}
|
||||||
|
|
||||||
|
#target10parent {
|
||||||
|
--varA: good;
|
||||||
|
--varB: Also good;
|
||||||
|
--varC: another good one;
|
||||||
|
}
|
||||||
|
|
||||||
|
#target10 {
|
||||||
|
--varA: var(--varB);
|
||||||
|
--varB: var(--varA);
|
||||||
|
--varC: var(--varB);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="target1"></div>
|
||||||
|
<div id="target2parent">
|
||||||
|
<div id="target2"></div>
|
||||||
|
</div>
|
||||||
|
<div id="target3"></div>
|
||||||
|
<div id="target4"></div>
|
||||||
|
<div id="target5"></div>
|
||||||
|
<div id="target6"></div>
|
||||||
|
<div id="target7"></div>
|
||||||
|
<div id="target8"></div>
|
||||||
|
<div id="target9"></div>
|
||||||
|
<div id="target10parent">
|
||||||
|
<div id="target10"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var testcases = [
|
||||||
|
{ element: "target1", propertyName: "--var2", expectedPropertyValue: "23px 13px 17px 10px" },
|
||||||
|
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "23px" },
|
||||||
|
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "13px" },
|
||||||
|
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "17px" },
|
||||||
|
{ element: "target1", propertyName: "margin-left", expectedPropertyValue: "10px" },
|
||||||
|
|
||||||
|
{ element: "target2parent", propertyName: "--var1", expectedPropertyValue: "" },
|
||||||
|
{ element: "target2parent", propertyName: "--var2", expectedPropertyValue: "" },
|
||||||
|
{ element: "target2", propertyName: "--var1", expectedPropertyValue: "good" },
|
||||||
|
{ element: "target2", propertyName: "--var2", expectedPropertyValue: "" },
|
||||||
|
|
||||||
|
{ element: "target3", propertyName: "--var1", expectedPropertyValue: "5px" },
|
||||||
|
{ element: "target3", propertyName: "--var2", expectedPropertyValue: "5px" },
|
||||||
|
|
||||||
|
{ element: "target4", propertyName: "--varA", expectedPropertyValue: "" },
|
||||||
|
{ element: "target4", propertyName: "--varB", expectedPropertyValue: "" },
|
||||||
|
{ element: "target4", propertyName: "--varC", expectedPropertyValue: "13px" },
|
||||||
|
|
||||||
|
{ element: "target5", propertyName: "--varA", expectedPropertyValue: "" },
|
||||||
|
{ element: "target5", propertyName: "--varB", expectedPropertyValue: "" },
|
||||||
|
{ element: "target5", propertyName: "--varC", expectedPropertyValue: "" },
|
||||||
|
|
||||||
|
{ element: "target6", propertyName: "--varA", expectedPropertyValue: "" },
|
||||||
|
{ element: "target6", propertyName: "--varB", expectedPropertyValue: "" },
|
||||||
|
{ element: "target6", propertyName: "--varC", expectedPropertyValue: "13px" },
|
||||||
|
|
||||||
|
{ element: "target7", propertyName: "--varA", expectedPropertyValue: "" },
|
||||||
|
{ element: "target7", propertyName: "--varB", expectedPropertyValue: "" },
|
||||||
|
{ element: "target7", propertyName: "--varC", expectedPropertyValue: "13px" },
|
||||||
|
|
||||||
|
{ element: "target8", propertyName: "--varA", expectedPropertyValue: "" },
|
||||||
|
{ element: "target8", propertyName: "--varB", expectedPropertyValue: "7px" },
|
||||||
|
|
||||||
|
{ element: "target9", propertyName: "--varA", expectedPropertyValue: "good" },
|
||||||
|
{ element: "target9", propertyName: "--varB", expectedPropertyValue: "very good" },
|
||||||
|
{ element: "target9", propertyName: "--varC", expectedPropertyValue: "very good" },
|
||||||
|
|
||||||
|
{ element: "target10", propertyName: "--varA", expectedPropertyValue: "" },
|
||||||
|
{ element: "target10", propertyName: "--varB", expectedPropertyValue: "" },
|
||||||
|
{ element: "target10", propertyName: "--varC", expectedPropertyValue: "" },
|
||||||
|
];
|
||||||
|
|
||||||
|
testcases.forEach(function (testcase) {
|
||||||
|
test( function () {
|
||||||
|
var div = document.getElementById(testcase.element);
|
||||||
|
var actualPropertyValue = window.getComputedStyle(div).getPropertyValue(testcase.propertyName);
|
||||||
|
assert_equals(actualPropertyValue, testcase.expectedPropertyValue);
|
||||||
|
}, testcase.element + " " + testcase.propertyName);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue