cssstyledeclaration-setter-logical.html (2805B)
1 <!DOCTYPE html> 2 <title>CSSOM test: declaration block after setting via CSSOM</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom/#set-a-css-declaration-value"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <div id="log"></div> 7 <div id="test"></div> 8 <script> 9 test(function() { 10 const PHYSICAL_PROPS = ["padding-top", "padding-right", 11 "padding-bottom", "padding-left"]; 12 const LOGICAL_PROPS = ["padding-block-start", "padding-block-end", 13 "padding-inline-start", "padding-inline-end"]; 14 let elem = document.getElementById("test"); 15 let decls = new Map; 16 17 { 18 let css = [] 19 let i = 0; 20 for (let name of [...PHYSICAL_PROPS, ...LOGICAL_PROPS]) { 21 let value = `${i++}px`; 22 css.push(`${name}: ${value};`); 23 decls.set(name, value); 24 } 25 elem.setAttribute("style", css.join(" ")); 26 } 27 28 let style = elem.style; 29 function indexOfProperty(prop) { 30 return Array.prototype.indexOf.apply(style, [prop]); 31 } 32 function assertPropAfterProps(prop, props, msg) { 33 let index = indexOfProperty(prop); 34 for (let p of props) { 35 assert_less_than(indexOfProperty(p), index, `${prop} should be after ${p} ${msg}`); 36 } 37 } 38 // We are not changing any value in this test, just order. 39 function assertValueUnchanged() { 40 for (let [name, value] of decls.entries()) { 41 assert_equals(style.getPropertyValue(name), value, 42 `value of ${name} shouldn't be changed`); 43 } 44 } 45 46 assertValueUnchanged(); 47 // Check that logical properties are all after physical properties 48 // at the beginning. 49 for (let p of LOGICAL_PROPS) { 50 assertPropAfterProps(p, PHYSICAL_PROPS, "initially"); 51 } 52 53 // Try setting a longhand. 54 style.setProperty("padding-top", "0px"); 55 assertValueUnchanged(); 56 // Check that padding-top is after logical properties, but other 57 // physical properties are still before logical properties. 58 assertPropAfterProps("padding-top", LOGICAL_PROPS, "after setting padding-top"); 59 for (let p of LOGICAL_PROPS) { 60 assertPropAfterProps(p, PHYSICAL_PROPS.filter(prop => prop != "padding-top"), 61 "after setting padding-top"); 62 } 63 64 // Try setting a shorthand. 65 style.setProperty("padding", "0px 1px 2px 3px"); 66 assertValueUnchanged(); 67 // Check that all physical properties are now after logical properties. 68 for (let p of PHYSICAL_PROPS) { 69 assertPropAfterProps(p, LOGICAL_PROPS, "after setting padding shorthand"); 70 } 71 }, "newly set declaration should be after all declarations " + 72 "in the same logical property group but have different logical kind"); 73 </script>