wpt/css/css-transitions/transition-behavior-events.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<title>CSS transition event dispatch depending on transition-behavior</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#event-transitionevent">
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#transition-behavior-property">
<meta name="assert" content="
  Even for a property like `width` which has a non-discrete animation type,
  transitions among non-interpolable values should only start (as observed
  by the `transitionrun` and `transitionstart` events) if discrete transitions
  are allowed by `transition-behavior`.
">
<style>
#width1, #width2 {
  width: auto;
  transition: width 3s -1s linear;
}
</style>
<div id="width1" style="transition-behavior: normal"></div>
<div id="width2" style="transition-behavior: allow-discrete"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
promise_setup(() => new Promise((resolve, reject) => {
  for (let event of ["transitionrun", "transitionstart"]) {
    let event_log = [];
    addEventListener(event, event => {
      event_log.push(event.target.id);
    });
    promise_test(async function() {
      assert_array_equals(event_log, ["width2"], "Should only get " + event + " event on #width2");
    }, event + " events");
  }
  document.body.offsetLeft;
  addEventListener("error", event => reject(event.message));
  requestAnimationFrame(() => {
      document.getElementById("width1").style.width = document.getElementById("width2").style.width = "100px";
      requestAnimationFrame(resolve);

  });
}));
</script>