cssstyledeclaration-all-shorthand.html (2272B)
1 <!DOCTYPE html> 2 <title>CSSOM Test: Passing "all" shorthand to property methods</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade/#all-shorthand"> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 const style = document.createElement("div").style; 9 10 test((t) => { 11 t.add_cleanup(() => { style.cssText = ""; } ); 12 style.cssText = "width: 50px"; 13 assert_equals(style.getPropertyValue("all"), ""); 14 }, "getPropertyValue('all') returns empty string"); 15 16 test((t) => { 17 t.add_cleanup(() => { style.cssText = ""; } ); 18 style.cssText = "all: revert"; 19 assert_equals(style.getPropertyValue("all"), "revert"); 20 }, "getPropertyValue('all') returns css-wide keyword if possible"); 21 22 test((t) => { 23 t.add_cleanup(() => { style.cssText = ""; } ); 24 style.cssText = "all: revert; width: 50px"; 25 assert_equals(style.getPropertyValue("all"), ""); 26 }, "getPropertyValue('all') returns empty string when single property overriden"); 27 28 test((t) => { 29 t.add_cleanup(() => { style.cssText = ""; } ); 30 style.setProperty("all", "revert"); 31 assert_equals(style.getPropertyValue("width"), "revert"); 32 assert_equals(style.getPropertyValue("color"), "revert"); 33 }, "setProperty('all') sets all property values"); 34 35 test((t) => { 36 t.add_cleanup(() => { style.cssText = ""; } ); 37 style.cssText = "width: 50px; color: green; direction: rtl"; 38 assert_equals(style.getPropertyValue("width"), "50px"); 39 assert_equals(style.getPropertyValue("color"), "green"); 40 assert_equals(style.getPropertyValue("direction"), "rtl"); 41 style.removeProperty("all"); 42 assert_equals(style.getPropertyValue("width"), ""); 43 assert_equals(style.getPropertyValue("color"), ""); 44 assert_equals(style.getPropertyValue("direction"), "rtl"); 45 }, "removeProperty('all') removes all declarations affected by 'all'"); 46 47 test((t) => { 48 t.add_cleanup(() => { style.cssText = ""; } ); 49 style.cssText = "all: revert"; 50 style.removeProperty("all"); 51 assert_equals(style.getPropertyValue("all"), ""); 52 }, "removeProperty('all') removes an 'all' declaration"); 53 54 </script>