multiple-scopes.html (3062B)
1 <!DOCTYPE HTML> 2 <title>::part() and pseudo-elements from multiple scopes (encapsulation contexts)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-4/#cascade-sort"> 4 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part"> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 6 <link rel="author" title="Google" href="http://www.google.com/"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 11 ::part(e1)::file-selector-button { border-top-width: 7px; } 12 ::part(p1)::file-selector-button { border-top-color: red; } 13 ::file-selector-button { border-top-style: dashed; } 14 15 </style> 16 17 <body> 18 19 <div id="outerhost"></div> 20 21 <script> 22 "use strict"; 23 24 let target_cs; 25 26 test(t => { 27 let outer_host = document.getElementById("outerhost"); 28 let outer_shadow = outer_host.attachShadow({mode: "open"}); 29 outer_shadow.innerHTML = ` 30 <style> 31 ::part(e1)::file-selector-button { border-right-width: 6px; } 32 ::part(p1)::file-selector-button { border-right-color: lime; } 33 ::file-selector-button { border-right-style: dotted; } 34 </style> 35 <div id="innerhost" exportparts="p1:e1"></div> 36 `; 37 38 let inner_host = outer_shadow.getElementById("innerhost"); 39 let inner_shadow = inner_host.attachShadow({mode: "open"}); 40 inner_shadow.innerHTML = ` 41 <style> 42 ::part(e1)::file-selector-button { border-bottom-width: 5px; } 43 ::part(p1)::file-selector-button { border-bottom-color: red; } 44 ::file-selector-button { border: 3px double black; } 45 </style> 46 <input type="file" part="p1" id="target"> 47 `; 48 target_cs = getComputedStyle(inner_shadow.getElementById("target"), "::file-selector-button"); 49 assert_true(true); 50 }, "successful test setup"); 51 52 test(t => { 53 assert_equals(target_cs.borderTopWidth, "7px"); 54 }, "exported part selector matches from outer scope"); 55 56 test(t => { 57 assert_equals(target_cs.borderTopColor, "rgb(0, 0, 0)"); 58 }, "non-exported part selector does not match from outer scope"); 59 60 test(t => { 61 assert_equals(target_cs.borderTopStyle, "double"); 62 }, "pseudo-element selector alone does not match from outer scope"); 63 64 test(t => { 65 assert_equals(target_cs.borderRightWidth, "3px"); 66 }, "exported part selector (for outer scope) does not match from middle scope"); 67 68 test(t => { 69 assert_equals(target_cs.borderRightColor, "rgb(0, 255, 0)"); 70 }, "correct part selector matches from middle scope"); 71 72 test(t => { 73 assert_equals(target_cs.borderRightStyle, "double"); 74 }, "pseudo-element selector alone does not match from middle scope"); 75 76 test(t => { 77 assert_equals(target_cs.borderBottomWidth, "3px"); 78 }, "selector with ::part(exported name) does not match from inner scope that exports the part"); 79 80 test(t => { 81 assert_equals(target_cs.borderBottomColor, "rgb(0, 0, 0)"); 82 }, "selector with ::part(original name) does not match from inner scope that exports the part"); 83 84 test(t => { 85 assert_equals(target_cs.borderBottomStyle, "double"); 86 }, "pseudo-element selector alone matches from inner scope"); 87 88 </script>