Google Git
Sign in
webkit / WebKit / d412672bedbda3cf7604d3ce86f733e80eb3476f / . / LayoutTests / imported / w3c / web-platform-tests / css / css-properties-values-api / at-property-shadow.html
blob: aaef2641a164f1ff21f3b5ae7326e020c8f442dd [file] [log] [blame]
<!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>