Skip to content

GitLab

T
tangled
Commit 74ff2c23 authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot
Browse files
Options

[css-properties-values-api] Add test for cascading behavior. 

Registered custom properties should behave as if they weren't registered
for parsing and cascading purposes. Only at computed-value time does the
syntax from the registration come into play.

R=chrishtr@chromium.org

Bug: 641877
Change-Id: I5ed5b334318e653da660b88b2dd912cc0b59f36d
Reviewed-on: https://chromium-review.googlesource.com/1136448Reviewed-by: default avatarChris Harrelson <chrishtr@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575161}
parent 4bb20a46
Hide whitespace changes
Inline Side-by-side
Showing with 64 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-properties-values-api/property-cascade.html 0 → 100644
View file @ 74ff2c23
<!DOCTYPE html>
<link rel="author" title="Anders Hartvoll Ruud" href="andruud@chromium.org">
<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 propety 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment