<!DOCTYPE html>
<title>CSSOM test: declaration block 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(({name, value, priority}) => {
let longhand = `${name}: ${value}`;
if (priority) {
longhand += "!" + priority;
}
return longhand + ";";
}).join(" ");
elem.setAttribute("style", cssText);
return elem.style;
}
function compareByName(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
}
function checkDeclarationsAnyOrder(block, props, msg) {
let actual = [];
for (let name of block) {
let value = block.getPropertyValue(name);
let priority = block.getPropertyPriority(name);
actual.push({name, value, priority});
}
actual.sort(compareByName);
let expected = Array.from(props);
expected.sort(compareByName);
assert_object_equals(actual, expected, "Declaration block content should match " + msg);
}
function longhand(name, value, priority="") {
return {name, value, priority};
}
function* shorthand(name, value, priority="") {
for (let subprop of SUBPROPS[name]) {
yield longhand(subprop, value, priority);
}
}
const SUBPROPS = {
"margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"],
"padding": ["padding-top", "padding-right", "padding-bottom", "padding-left"],
};
test(function() {
let expectedDecls = [
longhand("top", "1px"),
longhand("bottom", "2px"),
longhand("left", "3px", "important"),
longhand("right", "4px"),
];
let block = generateCSSDeclBlock(expectedDecls);
checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");
block.setProperty("top", "5px", "important");
expectedDecls[0] = longhand("top", "5px", "important");
checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property");
block.setProperty("bottom", "2px");
checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with identical value");
block.setProperty("left", "3px");
expectedDecls[2].priority = "";
checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with different priority");
block.setProperty("float", "none");
expectedDecls.push(longhand("float", "none"));
checkDeclarationsAnyOrder(block, expectedDecls, "after setting non-existing property");
}, "setProperty with longhand should update only the declaration being set");
test(function() {
let expectedDecls = [
longhand("top", "1px"),
longhand("bottom", "2px"),
longhand("left", "3px", "important"),
longhand("right", "4px"),
];
let block = generateCSSDeclBlock(expectedDecls);
checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");
block.top = "5px";
expectedDecls[0] = longhand("top", "5px");
checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property");
block.bottom = "2px";
checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with identical value");
block.left = "3px";
expectedDecls[2].priority = "";
checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with different priority");
block.float = "none";
expectedDecls.push(longhand("float", "none"));
checkDeclarationsAnyOrder(block, expectedDecls, "after setting non-existing property");
}, "property setter should update only the declaration being set");
test(function() {
let expectedDecls = [
...shorthand("margin", "1px"),
longhand("top", "2px"),
...shorthand("padding", "3px", "important"),
];
let block = generateCSSDeclBlock(expectedDecls);
checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");
block.setProperty("margin", "4px");
for (let i = 0; i < 4; i++) {
expectedDecls[i].value = "4px";
}
checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand");
block.setProperty("margin", "4px");
checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with identical value");
block.setProperty("padding", "3px");
for (let i = 5; i < 9; i++) {
expectedDecls[i].priority = "";
}
checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with different priority");
block.setProperty("margin-bottom", "5px", "important");
expectedDecls[2] = longhand("margin-bottom", "5px", "important");
checkDeclarationsAnyOrder(block, expectedDecls, "after setting a longhand in an existing shorthand");
}, "setProperty with shorthand should update only the declarations being set");
test(function() {
let expectedDecls = [
...shorthand("margin", "1px"),
longhand("top", "2px"),
...shorthand("padding", "3px", "important"),
];
let block = generateCSSDeclBlock(expectedDecls);
checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");
block.margin = "4px";
for (let i = 0; i < 4; i++) {
expectedDecls[i].value = "4px";
}
checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand");
block.margin = "4px";
checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with identical value");
block.padding = "3px";
for (let i = 5; i < 9; i++) {
expectedDecls[i].priority = "";
}
checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with different priority");
block.marginBottom = "5px";
expectedDecls[2] = longhand("margin-bottom", "5px");
checkDeclarationsAnyOrder(block, expectedDecls, "after setting a longhand in an existing shorthand");
}, "longhand property setter should update only the decoarations being set");
</script>
Codebase Browser
chromium