160 lines
6 KiB
HTML
160 lines
6 KiB
HTML
<!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>
|