58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Transitions Test: trigger transitions on inherited after-change styles for anchored element using fallback</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#after-change-style">
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-position/">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
body { margin: 0; }
|
|
#outer, #inner {
|
|
transition: 2s steps(2, start);
|
|
transition-property: color, width;
|
|
}
|
|
#outer {
|
|
anchor-name: --anchor;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: orange;
|
|
}
|
|
#inner.wide {
|
|
width: 300px !important;
|
|
}
|
|
#inner {
|
|
width: 100px;
|
|
height: 100px;
|
|
position: absolute;
|
|
position-anchor: --anchor;
|
|
position-area: left center;
|
|
position-try-fallbacks: --fallback;
|
|
background-color: teal;
|
|
}
|
|
@position-try --fallback {
|
|
position-area: right center;
|
|
width: 200px;
|
|
}
|
|
|
|
#outer { color: red; }
|
|
#inner { color: black; }
|
|
#outer.green { color: lime; }
|
|
#outer.green #inner { color: unset; }
|
|
</style>
|
|
<div id="outer">
|
|
<div>
|
|
<div id="inner" class="wide"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
outer.offsetTop;
|
|
assert_equals(inner.offsetLeft, 100, "Initially using fallback position");
|
|
assert_equals(inner.offsetWidth, 300, "Initially using important #inner.wide");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)", "#inner initially black");
|
|
outer.className = "green";
|
|
inner.className = "";
|
|
assert_equals(inner.offsetLeft, 100, "Still using fallback position");
|
|
assert_equals(inner.offsetWidth, 250, "Transitioning from !important width to fallback width");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)", "#inner halfway between black and lime");
|
|
}, "Position fallback correctly applied to after-change style");
|
|
</script>
|