mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +02:00
825ecea277
Automatic update from web-platform-tests Implement basic support for 'revert' CascadeMap now holds the cascaded declarations for the user-agent, user, and author origins separately. The 'revert' keyword is resolved to the cascaded value for the target origin before being applied to ComputedStyle. (This can happen recursively up to the kUserAgent origin. Note that 'revert' will not yet work to/from surrogates (css-logical properties), nor in @keyframes. Bug: 579788 Change-Id: I98b40d596867129e486035f9cd9f20e7b7cbe08e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2130268 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#756268} -- wpt-commits: 4a9b8106d499cce5e63e0a8bb59aec27d47717cf wpt-pr: 22615
63 lines
1.8 KiB
HTML
63 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#the-registerproperty-function" />
|
|
<meta name="assert" content="Verifies that registering a property does not affect the cascade" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
|
|
#outer { color: rgb(1, 1, 1); }
|
|
#inner {
|
|
--my-color: rgb(2, 2, 2);
|
|
--my-color: url(not-a-color);
|
|
color: var(--my-color);
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id=outer>
|
|
<div id=inner></div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
test(function(){
|
|
// Because var(--my-color) is invalid, our color declaration should behave
|
|
// like color:unset, i.e. it should compute to the inherited color.
|
|
assert_equals(inner.computedStyleMap().get('color').toString(), 'rgb(1, 1, 1)');
|
|
|
|
CSS.registerProperty({
|
|
name: '--my-color',
|
|
syntax: '<color>',
|
|
initialValue: 'rgb(3, 3, 3)',
|
|
inherits: false
|
|
});
|
|
|
|
// After registering, var(--my-color) is still invalid. The important thing
|
|
// here is that the computed value of color is the initialValue of
|
|
// --my-color, and not rgb(2, 2, 2).
|
|
assert_equals(inner.computedStyleMap().get('color').toString(), 'rgb(3, 3, 3)');
|
|
}, 'Registering a property does not affect cascade');
|
|
|
|
test(function(){
|
|
CSS.registerProperty({
|
|
name: '--my-color-2',
|
|
syntax: '<color>',
|
|
initialValue: 'rgb(4, 4, 4)',
|
|
inherits: false
|
|
});
|
|
|
|
let element = document.createElement('div');
|
|
element.style = `
|
|
--my-color-2: rgb(2, 2, 2);
|
|
--my-color-2: url(not-a-color);
|
|
color: var(--my-color-2);
|
|
`;
|
|
|
|
outer.appendChild(element);
|
|
|
|
assert_equals(element.computedStyleMap().get('color').toString(), 'rgb(4, 4, 4)');
|
|
}, 'Registering a property does not affect parsing');
|
|
|
|
|
|
</script>
|