part-mutation-pseudo.html (1246B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Shadow Parts - Invalidation Change Part Name on pseudo</title> 4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="author" href="https://mozilla.org" title="Mozilla"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/shadow-helper.js"></script> 10 <style>#c-e::part(partp)::before { color: red; }</style> 11 <script>installCustomElement("custom-element", "custom-element-template");</script> 12 <template id="custom-element-template"> 13 <style>span::before { content: ""; color: green; }</style> 14 <span id="part" part="partp">This text</span> 15 </template> 16 The following text should be green: 17 <div><custom-element id="c-e"></custom-element></div> 18 <script> 19 "use strict"; 20 test(function() { 21 const part = getElementByShadowIds(document, ["c-e", "part"]); 22 const before = getComputedStyle(part, "::before").color; 23 part.setAttribute("part", "somethingelse"); 24 const after = getComputedStyle(part, "::before").color; 25 assert_not_equals(before, after); 26 }, "Part in selected host changed color"); 27 </script>