mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
0b5807bc62
The only fishy bit is the animation stuff. In particular, there are two places where we just mint the revert behavior: * When serializing web-animations keyframes (the custom properties stuff in declaration_block.rs). That codepath is already not sound and I wanted to get rid of it in bug 1501530, but what do I know. * When getting an animation value from a property declaration. At that point we no longer have the CSS rules that apply to the element to compute the right revert value handy. It'd also use the wrong style anyway, I think, given the way StyleBuilder::for_animation works. We _could_ probably get them out of somewhere, but it seems like a whole lot of code reinventing the wheel which is probably not useful, and that Blink and WebKit just cannot implement either since they don't have a rule tree, so it just doesn't seem worth the churn. The custom properties code looks a bit different in order to minimize hash lookups in the common case. FWIW, `revert` for custom properties doesn't seem very useful either, but oh well. Differential Revision: https://phabricator.services.mozilla.com/D21877 --HG-- extra : moz-landing-system : lando
74 lines
3 KiB
HTML
74 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Variable definitions and keywords</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>
|
|
/* Specify a value in a rule hitting keyword targets so that the keywords
|
|
have something to override in the cascade. */
|
|
div > div
|
|
{
|
|
--var: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="inheritParent" style="--var: 20px;">
|
|
<div id="inheritTest" style="--var: inherit;"></div>
|
|
</div>
|
|
|
|
<div id="initialParent" style="--var: 20px;">
|
|
<div id="initialTest" style="--var: initial;"></div>
|
|
</div>
|
|
|
|
<div id="unsetParent" style="--var: 20px;">
|
|
<div id="unsetTest" style="--var: unset;"></div>
|
|
</div>
|
|
|
|
<div id="revertParent" style="--var: 20px;">
|
|
<div id="revertTest" style="--var: revert;"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
|
|
let computedStyle = [
|
|
{ elementId: "inheritTest", property: "--var", expectedValue: "20px", testName: "computed style inherit" },
|
|
{ elementId: "initialTest", property: "--var", expectedValue: "", testName: "computed style initial" },
|
|
{ elementId: "unsetTest", property: "--var", expectedValue: "20px", testName: "computed style unset" },
|
|
{ elementId: "revertTest", property: "--var", expectedValue: "20px", testName: "computed style revert" }
|
|
];
|
|
|
|
let specifiedStyle = [
|
|
{ elementId: "inheritTest", property: "--var", expectedValue: "inherit", testName: "specified style inherit" },
|
|
{ elementId: "initialTest", property: "--var", expectedValue: "initial", testName: "specified style initial" },
|
|
{ elementId: "unsetTest", property: "--var", expectedValue: "unset", testName: "specified style unset" },
|
|
{ elementId: "revertTest", property: "--var", expectedValue: "revert", testName: "specified style revert" }
|
|
];
|
|
|
|
computedStyle.forEach(function (csTest) {
|
|
test( function () {
|
|
var elem = document.getElementById(csTest.elementId);
|
|
var actualValue = window.getComputedStyle(elem).getPropertyValue(csTest.property).trim();
|
|
assert_equals(csTest.expectedValue, actualValue);
|
|
}, csTest.testName);
|
|
});
|
|
|
|
specifiedStyle.forEach(function (ssTest) {
|
|
test( function () {
|
|
var elem = document.getElementById(ssTest.elementId);
|
|
var actualValue = elem.style.getPropertyValue(ssTest.property);
|
|
assert_equals(ssTest.expectedValue, actualValue);
|
|
}, ssTest.testName);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|