backdrop-inherit-computed.html (1265B)
1 <!DOCTYPE html> 2 <title>CSS Position Test: ::backdrop inherits from originating element - computed values</title> 3 <link rel="help" href="https://drafts.csswg.org/css-position-4/#backdrop"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 dialog { 8 --foo: bar; 9 --bg: green; 10 left: 100px; 11 color-scheme: dark; 12 } 13 dialog::backdrop { 14 background-color: var(--bg); 15 left: inherit; 16 } 17 </style> 18 <dialog></dialog> 19 <script> 20 let dialog = document.querySelector("dialog"); 21 setup(() => { 22 dialog.showModal(); 23 }); 24 25 test(() => { 26 let style = getComputedStyle(dialog, "::backdrop"); 27 assert_equals(style.getPropertyValue("--foo"), "bar"); 28 assert_equals(style.getPropertyValue("--bg"), "green"); 29 }, "Inherit custom property"); 30 31 test(() => { 32 assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, "rgb(0, 128, 0)"); 33 }, "Apply inherited custom property to background-color"); 34 35 test(() => { 36 assert_equals(getComputedStyle(dialog, "::backdrop").colorScheme, "dark"); 37 }, "Implicitly inherited color-scheme"); 38 39 test(() => { 40 assert_equals(getComputedStyle(dialog, "::backdrop").left, "100px"); 41 }, "Explicitly inherited left"); 42 </script>