property-accessors.html (1678B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Accessing properties via CSSStyleDeclaration</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface"> 6 <!-- this is really a crash test, but let's claim it's a testharness test --> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 @font-face {} 11 </style> 12 <div id="testElement"></div> 13 <script> 14 // Goal here is to test a cross-section of prefixed, properties, and descriptors. 15 const properties = [ 16 "-apple-color-filter", "-apple-pay-button-style", "-epub-writing-mode", 17 "-webkit-flex", "gap", "grid-gap", "overscroll-behavior", 18 "src", "unicode-range", 19 ]; 20 21 const el = document.getElementById("testElement"); 22 const decls = [window.getComputedStyle(el), el.style, document.styleSheets[0].cssRules[0].style]; 23 24 for (const prop of properties) { 25 test(() => { 26 for (const decl of decls) { 27 let _; 28 29 _ = decl[prop]; 30 try { 31 decl[prop] = "nonsense"; 32 } catch { 33 assert_equals(decl, decls[0]); 34 } 35 36 _ = decl.cssText; 37 try { 38 decl.cssText = `${prop}: nonsense`; 39 } catch { 40 assert_equals(decl, decls[0]); 41 } 42 43 _ = decl.getPropertyValue(prop); 44 _ = decl.getPropertyPriority(prop); 45 46 if ("getPropertyCSSValue" in decl) { 47 _ = decl.getPropertyCSSValue(prop); 48 } 49 50 try { 51 decl.setProperty(prop, "nonsense", ""); 52 } catch { 53 assert_equals(decl, decls[0]); 54 } 55 56 try { 57 decl.removeProperty(prop); 58 } catch { 59 assert_equals(decl, decls[0]); 60 } 61 } 62 }, prop); 63 } 64 </script>