| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply
to an element that got slotted via another slot</title> |
| 5 <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/> |
| 6 <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo"> |
| 7 <link rel="match" href="reference/green-box.html"/> |
| 8 </head> |
| 9 <body> |
| 10 <style> |
| 11 outer-host { |
| 12 display: block; |
| 13 width: 100px; |
| 14 height: 100px; |
| 15 background: red; |
| 16 } |
| 17 outer-host > * { |
| 18 display: block; |
| 19 width: 100px; |
| 20 height: 25px; |
| 21 } |
| 22 </style> |
| 23 <p>Test passes if you see a single 100px by 100px green box below.</p> |
| 24 <outer-host> |
| 25 <span slot="outer">FAIL1</span> |
| 26 <span slot="inner">FAIL2</span> |
| 27 <span slot="both">FAIL3</span> |
| 28 </outer-host> |
| 29 <template id="outer-host-template"> |
| 30 <inner-host> |
| 31 <style> |
| 32 ::slotted([slot=outer]) { background: green; color: green; } |
| 33 ::slotted([slot=both]) { background: green; } |
| 34 span { display: block; width: 100px; height: 25px; } |
| 35 </style> |
| 36 <slot name="outer"></slot> |
| 37 <slot name="inner"></slot> |
| 38 <slot name="both"></slot> |
| 39 <span slot="inner">FAIL4</span> |
| 40 </inner-host> |
| 41 </template> |
| 42 <template id="inner-host-template"> |
| 43 <style> |
| 44 ::slotted([slot=inner]) { background: green; color: green; } |
| 45 ::slotted([slot=both]) { color: green; } |
| 46 </style> |
| 47 <slot></slot> |
| 48 <slot name="inner"></slot> |
| 49 </template> |
| 50 <script> |
| 51 |
| 52 try { |
| 53 var outerHost = document.querySelector('outer-host'); |
| 54 outerShadow = outerHost.attachShadow({mode: 'closed'}); |
| 55 outerShadow.appendChild(document.getElementById('outer-host-template
').content.cloneNode(true)); |
| 56 |
| 57 var innerHost = outerShadow.querySelector('inner-host'); |
| 58 innerShadow = innerHost.attachShadow({mode: 'closed'}); |
| 59 innerShadow.appendChild(document.getElementById('inner-host-template
').content.cloneNode(true)); |
| 60 } catch (exception) { |
| 61 document.body.appendChild(document.createTextNode(exception)); |
| 62 } |
| 63 |
| 64 </script> |
| 65 </body> |
| 66 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1922043004:
Import csswg-test@b2daa426addd5ccb8e9ce1c5d800f9d82603f1ec (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master