mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
85c2bf0ab2
Automatic update from web-platform-tests [css-variables] Custom props with invalid var() should behave as 'unset' We currently have a (WPT-enforced) bug where custom properties that reference guaranteed-invalid values [1] behave themselves as guaranteed- invalid. This is not correct per spec, which requires the custom property to behave as 'unset' in this case. This was clarified in [2], although the spec has described this behavior long before that. Unfortunately Firefox has the same issue. Safari on the other hand, does implement it correctly. [1] https://drafts.csswg.org/css-variables/#guaranteed-invalid [2] https://github.com/w3c/csswg-drafts/issues/4075 Bug: 980930 Change-Id: I84a0da3aad6b72b574009d560eb868632769098a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2108026 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/master@{#751636} -- wpt-commits: fc793094912b67b45a94d101819bffb9b9307710 wpt-pr: 22318
155 lines
No EOL
6.2 KiB
HTML
155 lines
No EOL
6.2 KiB
HTML
<!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: "" },
|
|
|
|
{ element: "target7", propertyName: "--varA", expectedPropertyValue: "" },
|
|
{ element: "target7", propertyName: "--varB", expectedPropertyValue: "" },
|
|
{ element: "target7", propertyName: "--varC", expectedPropertyValue: "" },
|
|
|
|
{ element: "target8", propertyName: "--varA", expectedPropertyValue: "" },
|
|
{ element: "target8", propertyName: "--varB", expectedPropertyValue: " 7px" },
|
|
|
|
{ element: "target9", propertyName: "--varA", expectedPropertyValue: " good" },
|
|
{ element: "target9", propertyName: "--varB", expectedPropertyValue: "" },
|
|
{ element: "target9", propertyName: "--varC", expectedPropertyValue: "" },
|
|
|
|
{ element: "target10", propertyName: "--varA", expectedPropertyValue: "" },
|
|
{ element: "target10", propertyName: "--varB", expectedPropertyValue: "" },
|
|
{ element: "target10", propertyName: "--varC", expectedPropertyValue: " another good one" },
|
|
];
|
|
|
|
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> |