| <!DOCTYPE html> |
| <title>CSSOM test: order of declarations after setting via CSSOM</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom/#set-a-css-declaration-value"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <div id="log"></div> |
| <script> |
| function generateCSSDeclBlock(props) { |
| let elem = document.createElement("div"); |
| let cssText = props.map(([prop, value]) => `${prop}: ${value};`).join(" "); |
| elem.setAttribute("style", cssText); |
| return elem.style; |
| } |
| function checkOrder(block, props, msg) { |
| assert_array_equals(Array.from(block), props, `Property order should match ${msg}`); |
| } |
| function arrayWithItemsAtEnd(array, items) { |
| let result = array.filter(item => !items.includes(item)); |
| return result.concat(items); |
| } |
| |
| const SUBPROPS = { |
| "margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"], |
| "padding": ["padding-top", "padding-right", "padding-bottom", "padding-left"], |
| }; |
| |
| test(function() { |
| let block = generateCSSDeclBlock([ |
| ["top", "1px"], |
| ["bottom", "2px"], |
| ["left", "3px"], |
| ["right", "4px"], |
| ]); |
| let expectedOrder = ["top", "bottom", "left", "right"]; |
| checkOrder(block, expectedOrder, "in initial block"); |
| |
| block.setProperty("top", "5px"); |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, ["top"]); |
| checkOrder(block, expectedOrder, "after setting existing property"); |
| |
| block.setProperty("bottom", "2px"); |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, ["bottom"]); |
| checkOrder(block, expectedOrder, "after setting existing property with identical value"); |
| }, "setProperty with existing longhand should change order"); |
| |
| test(function() { |
| let block = generateCSSDeclBlock([ |
| ["top", "1px"], |
| ["bottom", "2px"], |
| ["left", "3px"], |
| ["right", "4px"], |
| ]); |
| let expectedOrder = ["top", "bottom", "left", "right"]; |
| checkOrder(block, expectedOrder, "in initial block"); |
| |
| block.top = "5px"; |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, ["top"]); |
| checkOrder(block, expectedOrder, "after setting existing property"); |
| |
| block.bottom = "2px"; |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, ["bottom"]); |
| checkOrder(block, expectedOrder, "after setting existing property with identical value"); |
| }, "invoke property setter with existing longhand should change order"); |
| |
| test(function() { |
| let block = generateCSSDeclBlock([ |
| ["margin", "1px"], |
| ["top", "2px"], |
| ["padding", "3px"], |
| ]); |
| let expectedOrder = SUBPROPS["margin"].concat(["top"]).concat(SUBPROPS["padding"]); |
| checkOrder(block, expectedOrder, "in initial block"); |
| |
| block.setProperty("margin", "4px"); |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, SUBPROPS["margin"]); |
| checkOrder(block, expectedOrder, "after setting an existing shorthand"); |
| |
| block.setProperty("padding", "3px"); |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, SUBPROPS["padding"]); |
| checkOrder(block, expectedOrder, "after setting an existing shorthand with identical value"); |
| |
| block.setProperty("margin-bottom", "5px"); |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, ["margin-bottom"]); |
| checkOrder(block, expectedOrder, "after setting a longhand in an existing shorthand"); |
| }, "setProperty with existing shorthand should change order"); |
| |
| test(function() { |
| let block = generateCSSDeclBlock([ |
| ["margin", "1px"], |
| ["top", "2px"], |
| ["padding", "3px"], |
| ]); |
| let expectedOrder = SUBPROPS["margin"].concat(["top"]).concat(SUBPROPS["padding"]); |
| checkOrder(block, expectedOrder, "in initial block"); |
| |
| block.margin = "4px"; |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, SUBPROPS["margin"]); |
| checkOrder(block, expectedOrder, "after setting an existing shorthand"); |
| |
| block.padding = "3px"; |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, SUBPROPS["padding"]); |
| checkOrder(block, expectedOrder, "after setting an existing shorthand with identical value"); |
| |
| block.marginBottom = "5px"; |
| expectedOrder = arrayWithItemsAtEnd(expectedOrder, ["margin-bottom"]); |
| checkOrder(block, expectedOrder, "after setting a longhand in an existing shorthand"); |
| }, "invoke property setter with existing shorthand should change order"); |
| </script> |
