Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/cssstyledeclaration-setter-logical.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSSOM test: declaration block after setting via CSSOM</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="test"></div>
<script>
test(function() {
const PHYSICAL_PROPS = ["padding-top", "padding-right",
"padding-bottom", "padding-left"];
const LOGICAL_PROPS = ["padding-block-start", "padding-block-end",
"padding-inline-start", "padding-inline-end"];
let elem = document.getElementById("test");
let decls = new Map;
{
let css = []
let i = 0;
for (let name of [...PHYSICAL_PROPS, ...LOGICAL_PROPS]) {
let value = `${i++}px`;
css.push(`${name}: ${value};`);
decls.set(name, value);
}
elem.setAttribute("style", css.join(" "));
}
let style = elem.style;
function indexOfProperty(prop) {
return Array.prototype.indexOf.apply(style, [prop]);
}
function assertPropAfterProps(prop, props, msg) {
let index = indexOfProperty(prop);
for (let p of props) {
assert_less_than(indexOfProperty(p), index, `${prop} should be after ${p} ${msg}`);
}
}
// We are not changing any value in this test, just order.
function assertValueUnchanged() {
for (let [name, value] of decls.entries()) {
assert_equals(style.getPropertyValue(name), value,
`value of ${name} shouldn't be changed`);
}
}
assertValueUnchanged();
// Check that logical properties are all after physical properties
// at the beginning.
for (let p of LOGICAL_PROPS) {
assertPropAfterProps(p, PHYSICAL_PROPS, "initially");
}
// Try setting a longhand.
style.setProperty("padding-top", "0px");
assertValueUnchanged();
// Check that padding-top is after logical properties, but other
// physical properties are still before logical properties.
assertPropAfterProps("padding-top", LOGICAL_PROPS, "after setting padding-top");
for (let p of LOGICAL_PROPS) {
assertPropAfterProps(p, PHYSICAL_PROPS.filter(prop => prop != "padding-top"),
"after setting padding-top");
}
// Try setting a shorthand.
style.setProperty("padding", "0px 1px 2px 3px");
assertValueUnchanged();
// Check that all physical properties are now after logical properties.
for (let p of PHYSICAL_PROPS) {
assertPropAfterProps(p, LOGICAL_PROPS, "after setting padding shorthand");
}
}, "newly set declaration should be after all declarations " +
"in the same logical property group but have different logical kind");
</script>