175 lines
4.3 KiB
HTML
175 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>Logical properties with deferred <code>writing-mode</code></title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
|
|
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
|
|
<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords">
|
|
<meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time.">
|
|
<style>
|
|
#parent {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
|
|
@layer {
|
|
.revert-layer {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
}
|
|
@layer {
|
|
.revert-layer {
|
|
writing-mode: horizontal-tb;
|
|
writing-mode: revert-layer;
|
|
}
|
|
}
|
|
</style>
|
|
<div id="parent">
|
|
<div id="target"></div>
|
|
</div>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
const target = document.getElementById("target");
|
|
const computedStyle = getComputedStyle(target);
|
|
|
|
function check(expected) {
|
|
for (let [prop, value] of Object.entries(expected)) {
|
|
assert_equals(computedStyle.getPropertyValue(prop), value, prop);
|
|
}
|
|
}
|
|
|
|
test(function() {
|
|
target.style.cssText = `
|
|
--wm: vertical-rl;
|
|
writing-mode: var(--wm);
|
|
margin-block-start: 1px;
|
|
margin-block-end: 2px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 4px;
|
|
`;
|
|
check({
|
|
// Logicals
|
|
"margin-block-start": "1px",
|
|
"margin-block-end": "2px",
|
|
"margin-inline-start": "3px",
|
|
"margin-inline-end": "4px",
|
|
// Physicals
|
|
"margin-right": "1px",
|
|
"margin-left": "2px",
|
|
"margin-top": "3px",
|
|
"margin-bottom": "4px",
|
|
});
|
|
}, "Writing mode with variable");
|
|
|
|
test(function() {
|
|
target.style.cssText = `
|
|
--wm1: vertical-rl;
|
|
--wm2: var(--wm1);
|
|
writing-mode: var(--wm2);
|
|
margin-block-start: 1px;
|
|
margin-block-end: 2px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 4px;
|
|
`;
|
|
check({
|
|
// Logicals
|
|
"margin-block-start": "1px",
|
|
"margin-block-end": "2px",
|
|
"margin-inline-start": "3px",
|
|
"margin-inline-end": "4px",
|
|
// Physicals
|
|
"margin-right": "1px",
|
|
"margin-left": "2px",
|
|
"margin-top": "3px",
|
|
"margin-bottom": "4px",
|
|
});
|
|
}, "Writing mode with nested variables");
|
|
|
|
test(function() {
|
|
target.style.cssText = `
|
|
writing-mode: inherit;
|
|
margin-block-start: 1px;
|
|
margin-block-end: 2px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 4px;
|
|
`;
|
|
check({
|
|
// Logicals
|
|
"margin-block-start": "1px",
|
|
"margin-block-end": "2px",
|
|
"margin-inline-start": "3px",
|
|
"margin-inline-end": "4px",
|
|
// Physicals
|
|
"margin-left": "1px",
|
|
"margin-right": "2px",
|
|
"margin-top": "3px",
|
|
"margin-bottom": "4px",
|
|
});
|
|
}, "Writing mode with 'inherit'");
|
|
|
|
test(function() {
|
|
target.style.cssText = `
|
|
writing-mode: initial;
|
|
margin-block-start: 1px;
|
|
margin-block-end: 2px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 4px;
|
|
`;
|
|
check({
|
|
// Logicals
|
|
"margin-block-start": "1px",
|
|
"margin-block-end": "2px",
|
|
"margin-inline-start": "3px",
|
|
"margin-inline-end": "4px",
|
|
// Physicals
|
|
"margin-top": "1px",
|
|
"margin-bottom": "2px",
|
|
"margin-left": "3px",
|
|
"margin-right": "4px",
|
|
});
|
|
}, "Writing mode with 'initial'");
|
|
|
|
test(function() {
|
|
target.style.cssText = `
|
|
writing-mode: revert;
|
|
margin-block-start: 1px;
|
|
margin-block-end: 2px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 4px;
|
|
`;
|
|
check({
|
|
// Logicals
|
|
"margin-block-start": "1px",
|
|
"margin-block-end": "2px",
|
|
"margin-inline-start": "3px",
|
|
"margin-inline-end": "4px",
|
|
// Physicals
|
|
"margin-left": "1px",
|
|
"margin-right": "2px",
|
|
"margin-top": "3px",
|
|
"margin-bottom": "4px",
|
|
});
|
|
}, "Writing mode with 'revert'");
|
|
|
|
test(function() {
|
|
target.className = "revert-layer";
|
|
target.style.cssText = `
|
|
margin-block-start: 1px;
|
|
margin-block-end: 2px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 4px;
|
|
`;
|
|
check({
|
|
// Logicals
|
|
"margin-block-start": "1px",
|
|
"margin-block-end": "2px",
|
|
"margin-inline-start": "3px",
|
|
"margin-inline-end": "4px",
|
|
// Physicals
|
|
"margin-right": "1px",
|
|
"margin-left": "2px",
|
|
"margin-top": "3px",
|
|
"margin-bottom": "4px",
|
|
});
|
|
}, "Writing mode with 'revert-layer'");
|
|
</script>
|