Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(80)

Side by Side Diff: third_party/WebKit/LayoutTests/shadow-dom/slotted-pseudo-element-fallback-content-in-document.html

Issue 2789363002: Styling slot fallback content with ::slotted()
Patch Set: rebase Created 3 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script>
4 <script src="resources/shadow-dom.js"></script>
5
6 <style>
7 ::slotted(.red) { color: red; }
8 div { color: green; }
9 </style>
10
11 <slot>
12 <div id="red" class="red">Red Fallback Content</div>
13 <div id="green">Other Fallback Content</div>
14 </slot>
15
16 <script>
17 'use strict';
18
19 test(() => {
20 const redDiv = document.querySelector('#red');
21 const otherDiv = document.querySelector('#green');
22
23 assert_equals(window.getComputedStyle(redDiv).color, 'rgb(255, 0, 0)',
24 '::slotted() applies to fallback content.');
25 assert_equals(window.getComputedStyle(otherDiv).color, 'rgb(0, 128, 0)',
26 'non-::slotted() selector should match fallback content.');
27 }, '::slotted() should apply to fallback content in document tree.');
28 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698