getComputedStyle-getter-v-properties.tentative.html (1335B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSStyleDeclaration index getter v. attributes</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2529"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="testElement"></div> 9 <script> 10 11 /* per spec, the indexed getter gives all supported longhand properties, whereas 12 attributes are created for all supported properties; this implies the indexed 13 getter gives a subset of the attributes */ 14 15 const decl = window.getComputedStyle(document.getElementById("testElement")); 16 const declItems = Array.from(decl).sort(); 17 18 const shorthands = ['border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'font']; 19 const non_shorthands = ['margin-top', 'font-size', 'max-width', 'width']; 20 21 for (const prop of shorthands) { 22 test(() => { 23 assert_true(prop in decl, "getComputedStyle attribute"); 24 assert_false(declItems.includes(prop), "getComputedStyle indexed getter"); 25 }, prop); 26 } 27 28 for (const prop of non_shorthands) { 29 test(() => { 30 assert_true(prop in decl, "getComputedStyle attribute"); 31 assert_true(declItems.includes(prop), "getComputedStyle indexed getter"); 32 }, prop); 33 } 34 </script>