Source code
Revision control
Copy as Markdown
Other Tools
const sheet = document.head.appendChild(document.createElement("style"));
// Specify size for outer <div> to avoid unconstrained-size warnings
// when writing-mode of the inner test <div> is vertical-*
const wrapper = document.body.appendChild(document.createElement("div"));
wrapper.style.cssText = "width:100px; height: 100px;";
export const testElement = wrapper.appendChild(document.createElement("div"));
testElement.id = testElement.className = "test";
// Six unique overall writing modes for property-mapping purposes.
export const writingModes = [
{
styles: [
{"writing-mode": "horizontal-tb", "direction": "ltr"},
],
blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right",
over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
block: "vertical", inline: "horizontal" },
{
styles: [
{"writing-mode": "horizontal-tb", "direction": "rtl"},
],
blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left",
over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
block: "vertical", inline: "horizontal" },
{
styles: [
{"writing-mode": "vertical-rl", "direction": "rtl"},
{"writing-mode": "sideways-rl", "direction": "rtl"},
],
blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top",
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
block: "horizontal", inline: "vertical" },
{
styles: [
{"writing-mode": "vertical-rl", "direction": "ltr"},
{"writing-mode": "sideways-rl", "direction": "ltr"},
],
blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom",
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
block: "horizontal", inline: "vertical" },
{
styles: [
{"writing-mode": "vertical-lr", "direction": "rtl"},
],
blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
block: "horizontal", inline: "vertical" },
{
styles: [
{"writing-mode": "sideways-lr", "direction": "ltr"},
],
blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
block: "horizontal", inline: "vertical" },
{
styles: [
{"writing-mode": "vertical-lr", "direction": "ltr"},
],
blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
block: "horizontal", inline: "vertical" },
{
styles: [
{"writing-mode": "sideways-lr", "direction": "rtl"},
],
blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
block: "horizontal", inline: "vertical" },
];
// Check if logical properties work well in WebKit non-standard
// '-webkit-writing-mode: horizontal-bt' mode
if (CSS.supports("-webkit-writing-mode", "horizontal-bt")) {
writingModes.push (
{
styles: [
{"-webkit-writing-mode": "horizontal-bt", "direction": "ltr"},
],
blockStart: "bottom", blockEnd: "top", inlineStart: "left", inlineEnd: "right",
over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
block: "vertical", inline: "horizontal" },
{
styles: [
{"-webkit-writing-mode": "horizontal-bt", "direction": "rtl"},
],
blockStart: "bottom", blockEnd: "top", inlineStart: "right", inlineEnd: "left",
over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
block: "vertical", inline: "horizontal" },
)
}
export function testCSSValues(testName, style, expectedValues) {
for (const [property, value] of expectedValues) {
assert_equals(style.getPropertyValue(property), value, `${testName}, ${property}`);
}
}
export function testComputedValues(testName, rules, expectedValues) {
sheet.textContent = rules;
const cs = getComputedStyle(testElement);
testCSSValues(testName, cs, expectedValues);
sheet.textContent = "";
}
export function makeDeclaration(object = {}, replacement = "*") {
let decl = "";
for (const [property, value] of Object.entries(object)) {
decl += `${property.replace("*", replacement)}: ${value}; `;
}
return decl;
}