both-part-and-exportparts.html (1376B)
1 <!doctype html><meta charset="utf-8"> 2 <title>CSS Shadow Parts - ::part() rules when element has both @part and @exportparts</title> 3 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1347634"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 ::part(bar) { 9 color: green; 10 } 11 ::part(baz) { 12 background: lime; 13 } 14 </style> 15 <div id="foo"></div> 16 <script> 17 test(function() { 18 const foo = document.getElementById("foo"); 19 foo.attachShadow({ mode: "open" }).innerHTML = `<div id="outer" part="bar" exportparts="baz"></div>`; 20 const outer = foo.shadowRoot.getElementById("outer"); 21 outer.attachShadow({ mode: "open" }).innerHTML = `<div id="inner" part="baz">x</div>`; 22 const inner = outer.shadowRoot.getElementById("inner"); 23 24 // outer should still match ::part(bar) rule, despite having @exportparts 25 assert_equals(getComputedStyle(outer).color, "rgb(0, 128, 0)", 26 "outer matches ::part(bar) rule"); 27 28 // inner should match ::part(baz) rule, because of @exportparts in outer 29 assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 255, 0)", 30 "inner matches ::part(baz) rule"); 31 }, "::part() rules match elements having both @part and @exportparts"); 32 </script>