mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="./resources/utils.js"></script>
|
|
<style>
|
|
@property --x {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 0px;
|
|
}
|
|
#outside {
|
|
--x: calc(1px + 1px);
|
|
--y: calc(1px + 1px);
|
|
}
|
|
</style>
|
|
<template id=template>
|
|
<style>
|
|
/* This rule should have no effect */
|
|
@property --y {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 0px;
|
|
}
|
|
#inside {
|
|
--x: calc(1px + 1px);
|
|
--y: calc(1px + 1px);
|
|
}
|
|
</style>
|
|
<div id=inside></div>
|
|
</template>
|
|
<div id=host></div>
|
|
<div id=outside></div>
|
|
<script>
|
|
|
|
test(() => {
|
|
let root = host.attachShadow({ mode: 'open' });
|
|
root.append(template.content.cloneNode(true));
|
|
let inside = root.querySelector('#inside');
|
|
assert_equals(getComputedStyle(outside).getPropertyValue('--x'), '2px');
|
|
assert_equals(getComputedStyle(outside).getPropertyValue('--y'), 'calc(1px + 1px)');
|
|
assert_equals(getComputedStyle(inside).getPropertyValue('--x'), '2px');
|
|
assert_equals(getComputedStyle(inside).getPropertyValue('--y'), 'calc(1px + 1px)');
|
|
}, '@property rules in shadow trees should have no effect');
|
|
|
|
</script>
|