Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 24 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-contain/container-queries/container-units-typed-om.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Container Relative Units: CSS Typed OM</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<div id=element></div>
<script>
setup(() => assert_implements_container_queries());
const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
const functions = {
cqw: CSS.cqw,
cqh: CSS.cqh,
cqi: CSS.cqi,
cqb: CSS.cqb,
cqmin: CSS.cqmin,
cqmax: CSS.cqmax,
};
for (let unit of units) {
let func = functions[unit];
test(() => {
assert_equals(`${func(10)}`, `10${unit}`);
}, `CSS.${unit} function`);
test(() => {
try {
element.style.top = `10${unit}`;
let value = element.attributeStyleMap.get('top');
assert_equals(value.value, 10);
assert_equals(value.unit, unit);
} finally {
element.style = '';
}
}, `Reify value with ${unit} unit`);
test(() => {
try {
element.attributeStyleMap.set('top', `10${unit}`);
assert_equals(element.style.top, `10${unit}`);
} finally {
element.style = '';
}
}, `Set value with ${unit} unit (string)`);
test(() => {
try {
element.attributeStyleMap.set('top', func(10));
assert_equals(element.style.top, `10${unit}`);
} finally {
element.style = '';
}
}, `Set value with ${unit} unit (CSS.${unit})`);
}
</script>