part-dir.html (2117B)
1 <!doctype html> 2 <title>::part():dir() invalidation</title> 3 <link rel="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part" /> 5 <link rel="help" href="https://github.com/whatwg/html/pull/8467" /> 6 <style> 7 my-element::part(inner) { 8 background-color: #ff0000; 9 } 10 my-element::part(inner):dir(ltr) { 11 background-color: #00ff00; 12 } 13 my-element::part(inner):dir(rtl) { 14 background-color: #0000ff; 15 } 16 </style> 17 <body> 18 <my-element id="subject"></my-element> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <script> 22 const RED = "rgb(255, 0, 0)"; 23 const GREEN = "rgb(0, 255, 0)"; 24 const BLUE = "rgb(0, 0, 255)"; 25 customElements.define( 26 "my-element", 27 class MyElement extends HTMLElement { 28 connectedCallback() { 29 this.attachShadow({ 30 mode: "open", 31 }).innerHTML = `<div part="inner">Test</div>`; 32 this.elementInternals = this.attachInternals(); 33 } 34 35 get inner() { 36 return this.shadowRoot.querySelector("[part=inner]"); 37 } 38 }, 39 ); 40 41 test((t) => { 42 t.add_cleanup(() => { 43 subject.inner.lang = null; 44 }); 45 assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN); 46 subject.inner.dir = "rtl"; 47 assert_equals(getComputedStyle(subject.inner).backgroundColor, BLUE); 48 subject.inner.dir = "ltr"; 49 assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN); 50 }, "::part():dir() invalidation"); 51 52 test((t) => { 53 t.add_cleanup(() => { 54 subject.removeAttribute("dir"); 55 }); 56 assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN); 57 subject.inner.setAttribute("dir", "rtl"); 58 assert_equals(getComputedStyle(subject.inner).backgroundColor, BLUE); 59 subject.inner.removeAttribute("dir"); 60 assert_equals(getComputedStyle(subject.inner).backgroundColor, GREEN); 61 }, "::part():dir() invalidation from setAttribute"); 62 </script> 63 </body>