browser_computed_inherited-element-backed-pseudo-elements.js (1839B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Check that inherited element backed pseudo element declarations (e.g. ::details-content) 7 // are properly displayed 8 9 const TEST_URI = ` 10 <style> 11 details { 12 color: gold; 13 } 14 details::details-content { 15 color: dodgerblue; 16 } 17 details summary { 18 color: violet; 19 } 20 21 details#nested { 22 color: cyan; 23 } 24 details#nested summary { 25 color: hotpink; 26 } 27 details#nested::details-content { 28 color: rgb(10, 20, 30); 29 } 30 </style> 31 <details open> 32 <summary> 33 Top-level summary 34 <details id=nested open> 35 <summary>nested summary</summary> 36 <p id=matches>in nested details</p> 37 </details> 38 </summary> 39 </details>`; 40 41 add_task(async function () { 42 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 43 const { inspector, view } = await openComputedView(); 44 await selectNode("p#matches", inspector); 45 46 info("Checking the property itself"); 47 is( 48 getComputedViewPropertyView(view, "color").valueNode.textContent, 49 "rgb(10, 20, 30)", 50 "Got expected computed value for color on p#matches" 51 ); 52 53 info("Checking matched selectors"); 54 const container = await getComputedViewMatchedRules(view, "color"); 55 Assert.deepEqual( 56 [...container.querySelectorAll("p")].map(matchEl => 57 [...matchEl.querySelectorAll("div")].map(el => el.textContent) 58 ), 59 [ 60 ["details#nested::details-content", "rgb(10, 20, 30)"], 61 ["details::details-content", "dodgerblue"], 62 ["details#nested", "cyan"], 63 ["details", "gold"], 64 ["details summary", "violet"], 65 [":root", "canvastext"], 66 ], 67 "Got the expected matched selectors, including ::details-content ones" 68 ); 69 });