mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 09:45:06 +02:00
9a8c6ff8c3
When starting transitions we compute the after-change style, for any inherited properties this should include the non-animated value. Previously we were only inheriting the animated value and treating it as non-animated so were instead including the animated value. This commit fixes that by inheriting both the animated and non-animated values (with the former being stored in `m_animated_property_values`, and the latter in `m_property_values`). This gains us 12 new WPT passes. This brings with it 252 new WPT fails from the various 'events' tests in css/css-transitions/properties-value-inherit-001.html, however these also fail in other browsers (Chrome, Edge and Firefox) and the behaviour that causes these failures is specifically mentioned in the spec.
179 lines
6.2 KiB
HTML
179 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Transitions Test: trigger transitions on inherited after-change styles</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#after-change-style">
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<style>
|
|
#t1 :is(.outer, .inner) { transition: color 1000s steps(2, start); }
|
|
#t1 .outer { color: red; }
|
|
#t1 .inner { color: black; }
|
|
#t1 .outer.green { color: lime; }
|
|
#t1 .outer.green .inner { color: unset; }
|
|
</style>
|
|
<div id="t1">
|
|
<div class="outer">
|
|
<div>
|
|
<div class="inner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const outer = document.querySelector("#t1 .outer");
|
|
const inner = document.querySelector("#t1 .inner");
|
|
outer.offsetTop;
|
|
assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)",
|
|
".outer initially red");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)",
|
|
".inner initially black");
|
|
outer.classList.add("green");
|
|
assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)",
|
|
".outer halfway between red and lime");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)",
|
|
".inner halfway between black and lime");
|
|
}, "Start .inner transition based on inherited after-change color from .outer (lime)");
|
|
</script>
|
|
|
|
<style>
|
|
#t2 :is(.outer, .inner) { transition: background-color 1000s steps(2, start); }
|
|
#t2 .outer { background-color: red; }
|
|
#t2 .inner { background-color: black; }
|
|
#t2 .outer.green { background-color: lime; }
|
|
#t2 .outer.green div { background-color: inherit; }
|
|
</style>
|
|
<div id="t2">
|
|
<div class="outer">
|
|
<div>
|
|
<div class="inner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const outer = document.querySelector("#t2 .outer");
|
|
const inner = document.querySelector("#t2 .inner");
|
|
outer.offsetTop;
|
|
assert_equals(getComputedStyle(outer).backgroundColor, "rgb(255, 0, 0)",
|
|
".outer initially red");
|
|
assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 0, 0)",
|
|
".inner initially black");
|
|
outer.classList.add("green");
|
|
assert_equals(getComputedStyle(outer).backgroundColor, "rgb(128, 128, 0)",
|
|
".outer halfway between red and lime");
|
|
assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 128, 0)",
|
|
".inner halfway between black and lime");
|
|
}, "Start .inner transition based on inherited after-change background-color from .outer (lime)");
|
|
</script>
|
|
|
|
<style>
|
|
#t3 .trans {
|
|
transition: 1000s steps(2, start);
|
|
transition-property: color, word-spacing;
|
|
}
|
|
|
|
#t3 .a2 { color: red; }
|
|
#t3 .a3 { color: black; }
|
|
#t3 .a2.green { color: lime; }
|
|
#t3 .a2.green .a3 { color: unset; }
|
|
|
|
#t3 .a1 { word-spacing: 17px; }
|
|
#t3 .a3 { word-spacing: 0px; }
|
|
#t3 .a1.wide { word-spacing: 100px; }
|
|
#t3 .a1.wide .a3 { word-spacing: unset; }
|
|
</style>
|
|
<div id="t3">
|
|
<div class="trans a1">
|
|
<div style="color:pink">
|
|
<div class="trans a2">
|
|
<div class="trans a3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const a1 = document.querySelector("#t3 .a1");
|
|
const a2 = document.querySelector("#t3 .a2");
|
|
const a3 = document.querySelector("#t3 .a3");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(a3).color, "rgb(0, 0, 0)", ".a3 color initially black");
|
|
assert_equals(getComputedStyle(a3).wordSpacing, "0px", ".a3 word-spacing initially 0px");
|
|
}, "Initial computed styles");
|
|
|
|
test(() => {
|
|
a1.classList.add("wide");
|
|
a2.classList.add("green");
|
|
assert_equals(getComputedStyle(a3).color, "rgb(0, 128, 0)", ".a3 color transitioning between black and lime");
|
|
assert_equals(getComputedStyle(a3).wordSpacing, "50px", ".a3 word-spacing transitioning between 0px and 100px");
|
|
}, "Start inner transitions based on inherited after-change color and word-spacing from two different ancestors");
|
|
</script>
|
|
|
|
<style>
|
|
#t4 :is(.outer, .inner) { transition: color 1000s steps(2, start); }
|
|
#t4 .outer { color: red; }
|
|
#t4 .inner { color: black; }
|
|
#t4 .outer.green { color: lime; }
|
|
#t4 .outer.green .inner { color: unset; }
|
|
@starting-style {
|
|
#t4 .outer.green { color: pink; }
|
|
}
|
|
</style>
|
|
<div id="t4">
|
|
<div class="outer">
|
|
<div>
|
|
<div class="inner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const outer = document.querySelector("#t4 .outer");
|
|
const inner = document.querySelector("#t4 .inner");
|
|
outer.offsetTop;
|
|
assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)",
|
|
".outer initially red");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)",
|
|
".inner initially black");
|
|
outer.classList.add("green");
|
|
assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)",
|
|
".outer halfway between red and lime");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)",
|
|
".inner halfway between black and lime");
|
|
}, "@starting-style rules should not apply to after-change style");
|
|
</script>
|
|
|
|
<style>
|
|
#t5 :is(.outer, .inner) { transition: color 1000s steps(2, start); }
|
|
#t5 .outer { color: red; }
|
|
#t5 .inner { color: black; }
|
|
#t5 .outer.green { color: lime; }
|
|
#t5 .container { container-type: inline-size; }
|
|
@container (width < 100000px) {
|
|
#t5 .outer.green .inner { color: unset; }
|
|
}
|
|
</style>
|
|
<div id="t5">
|
|
<div class="outer">
|
|
<div class="container">
|
|
<div class="inner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const outer = document.querySelector("#t5 .outer");
|
|
const inner = document.querySelector("#t5 .inner");
|
|
outer.offsetTop;
|
|
assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)",
|
|
".outer initially red");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)",
|
|
".inner initially black");
|
|
outer.classList.add("green");
|
|
assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)",
|
|
".outer halfway between red and lime");
|
|
assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)",
|
|
".inner halfway between black and lime");
|
|
}, "@container rules apply to after-change style");
|
|
</script>
|