blob: 8f89dbce08b458ccb9c970f2fa32f446cef12f0e [file] [log] [blame]
<!DOCTYPE html>
<!DOCTYPE html>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<script src='resources/shadow-dom.js'></script>
#host {
color: red;
<div id="host">
<template data-mode="open">
div {
color: green;
div.p1 {
color: blue;
<slot name="s1"></slot>
<span id="span0" slot="unassigned"></span>
<span id="span1" slot="s1"></span>
test(() => {
assert_equals(getComputedStyle(span0).color, 'rgb(0, 0, 0)',
'An element which is not assigned to any slot should not inherit a style from the parent.');
assert_equals(getComputedStyle(host.shadowRoot.querySelector('slot')).color, 'rgb(0, 128, 0)',
'A slot should inherit style from the parent.');
assert_equals(getComputedStyle(span1).color, 'rgb(0, 128, 0)',
'An element which is assigned to a slot should inherit a style from the slot.');
host.shadowRoot.querySelector('div').className = 'p1';
assert_equals(getComputedStyle(span1).color, 'rgb(0, 0, 255)',
'The style change should propagate down to a slotted element.');
}, 'CSS inheritance tests for assigned nodes, not-assigned nodes, and slots');