<!DOCTYPE html><html><head><title>CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot</title><linkrel="author"title="Ryosuke Niwa"href="mailto:rniwa@webkit.org"/><linkrel="help"href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo"><linkrel="match"href="reference/green-box.html"/></head><body><style>outer-host{display:block;width:100px;height:100px;background:red;}outer-host>*{display:block;width:100px;height:25px;}</style><p>Test passes if you see a single 100px by 100px green box below.</p><outer-host><spanslot="outer">FAIL1</span><spanslot="inner">FAIL2</span><spanslot="both">FAIL3</span></outer-host><templateid="outer-host-template"><inner-host><style>::slotted([slot=outer]){background:green;color:green;}::slotted([slot=both]){background:green;}span{display:block;width:100px;height:25px;}</style><slotname="outer"></slot><slotname="inner"></slot><slotname="both"></slot><spanslot="inner">FAIL4</span></inner-host></template><templateid="inner-host-template"><style>::slotted([slot=inner]){background:green;color:green;}::slotted([slot=both]){color:green;}</style><slot></slot><slotname="inner"></slot></template><script>try{varouterHost=document.querySelector('outer-host');outerShadow=outerHost.attachShadow({mode:'closed'});outerShadow.appendChild(document.getElementById('outer-host-template').content.cloneNode(true));varinnerHost=outerShadow.querySelector('inner-host');innerShadow=innerHost.attachShadow({mode:'closed'});innerShadow.appendChild(document.getElementById('inner-host-template').content.cloneNode(true));}catch(exception){document.body.appendChild(document.createTextNode(exception));}</script></body></html>