<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test-pre.js"></script>
</head>
<style>
my-host { display: none; color: red; }
</style>
<body>
<my-host><my-host-child></my-host-child></my-host>
<script>
description("Ensure tha slotted elements with display:none inherit their style via shadow tree");

var host = document.querySelector("my-host");
var shadowRoot = host.attachShadow({ mode: "closed"});
shadowRoot.innerHTML = "<style>div { color: green }</style><div><slot></slot></div>";

hostChild = document.querySelector("my-host-child");
shouldBeEqualToString("getComputedStyle(hostChild).color", "rgb(0, 128, 0)");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>