Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>Test that 'column-wrap' is part of the 'columns' shorthand for animations</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.multicol {
columns: 100px / 100px;
column-wrap: nowrap;
transition: columns 2s allow-discrete;
}
#mid {
transition-delay: -1s;
}
#end {
transition-delay: -2s;
}
</style>
<div id="start" class="multicol"></div>
<div id="mid" class="multicol"></div>
<div id="end" class="multicol"></div>
<script>
test(()=> {
assert_equals(getComputedStyle(start).columnWrap, "nowrap");
assert_equals(getComputedStyle(mid).columnWrap, "nowrap");
assert_equals(getComputedStyle(end).columnWrap, "nowrap");
document.querySelectorAll(".multicol").forEach(elm => {
// Set `columns` to the same as before.
// This should reset `column-wrap` to `auto`.
elm.style.columns = '100px / 100px';
});
assert_equals(getComputedStyle(start).columnWrap, "nowrap");
assert_equals(getComputedStyle(mid).columnWrap, "auto");
assert_equals(getComputedStyle(end).columnWrap, "auto");
}, "Animate and reset column-wrap");
</script>