mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
154 lines
3.2 KiB
HTML
154 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>Resolving @property name conflicts with cascade layers</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering">
|
|
<link rel="author" href="mailto:xiaochengh@chromium.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#target, #reference {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
#reference {
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
|
|
<div id="target"></div>
|
|
<div id="reference"></div>
|
|
|
|
<script>
|
|
// In all tests, background color of #target should be green, same as #reference
|
|
|
|
const testCases = [
|
|
{
|
|
title: '@property unlayered overrides layered',
|
|
style: `
|
|
#target {
|
|
background-color: var(--foo);
|
|
}
|
|
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: green;
|
|
}
|
|
|
|
@layer {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: red;
|
|
}
|
|
}
|
|
`
|
|
},
|
|
|
|
{
|
|
title: '@property override between layers',
|
|
style: `
|
|
@layer base, override;
|
|
|
|
#target {
|
|
background-color: var(--foo);
|
|
}
|
|
|
|
@layer override {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: green;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: red;
|
|
}
|
|
}
|
|
`
|
|
},
|
|
|
|
{
|
|
title: '@property override update with appended sheet 1',
|
|
style: `
|
|
@layer base, override;
|
|
|
|
#target {
|
|
background-color: var(--foo);
|
|
}
|
|
|
|
@layer override {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: green;
|
|
}
|
|
}
|
|
`,
|
|
append: `
|
|
@layer base {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: red;
|
|
}
|
|
}
|
|
`
|
|
},
|
|
|
|
{
|
|
title: '@property override update with appended sheet 2',
|
|
style: `
|
|
@layer base, override;
|
|
|
|
#target {
|
|
background-color: var(--foo);
|
|
}
|
|
|
|
@layer base {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: red;
|
|
}
|
|
}
|
|
`,
|
|
append: `
|
|
@layer override {
|
|
@property --foo {
|
|
syntax: '<color>';
|
|
inherits: false;
|
|
initial-value: green;
|
|
}
|
|
}
|
|
`
|
|
},
|
|
];
|
|
|
|
for (let testCase of testCases) {
|
|
var documentStyle = document.createElement('style');
|
|
documentStyle.appendChild(document.createTextNode(testCase['style']));
|
|
document.head.appendChild(documentStyle);
|
|
|
|
var appendedStyle;
|
|
if (testCase['append']) {
|
|
document.body.offsetLeft; // Force style update
|
|
appendedStyle = document.createElement('style');
|
|
appendedStyle.appendChild(document.createTextNode(testCase['append']));
|
|
document.head.appendChild(appendedStyle);
|
|
}
|
|
|
|
test(function () {
|
|
assert_equals(getComputedStyle(target).backgroundColor,
|
|
getComputedStyle(reference).backgroundColor);
|
|
}, testCase['title']);
|
|
|
|
if (appendedStyle)
|
|
appendedStyle.remove();
|
|
documentStyle.remove();
|
|
}
|
|
</script>
|