sousa-gecko/testing/web-platform/tests/long-animation-frame/conditional-tracing.html

<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Long Animation Frame Timing: basic</title>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>

<body>
<h1>Long Animation Frame: Conditonal Tracing</h1>
<div id="log"></div>
<script>
setup(() =>
  assert_implements(
    "userTimingEntries" in PerformanceLongAnimationFrameTiming.prototype,
    'conditional user timing for LoAF not implemented'));

function close_enough(actual, expected) {
  return actual > expected*0.9 && actual < expected*1.1;
}
const segment_duration = very_long_frame_duration / 2;

promise_test(async t => {
  const loaf_entry = await expect_long_frame(async (t, busy_wait) => {
    performance.markConditional("mark0");
    busy_wait(segment_duration);
    performance.markConditional("mark1");
  }, t);

  assert_not_equals(loaf_entry, "timeout");

  const conditional_mark_entries = Array.from(loaf_entry.userTimingEntries)
    .filter(entry => entry.entryType === "mark-conditional");
  assert_equals(conditional_mark_entries.length, 2);
  assert_equals(conditional_mark_entries[0].name, "mark0");
  assert_equals(conditional_mark_entries[1].name, "mark1");

  function mark_st(i) {
    return conditional_mark_entries[i].startTime;
  }

  assert_true(mark_st(0) <= mark_st(1));

  // The mark time stamp reflects the delay of |segment_duration|.
  const d1 = mark_st(1) - mark_st(0);
  assert_true(close_enough(d1, segment_duration));

}, 'conditional user timing from a long busy wait');

promise_test(async t => {
  const loaf_entry = await expect_long_frame(async (t, busy_wait) => {
    await new Promise(resolve => requestAnimationFrame(() => {
      performance.markConditional("mark0");
      busy_wait(segment_duration)
      performance.markConditional("mark1");
      resolve();
    }));
  }, t);

  assert_not_equals(loaf_entry, "timeout");

  const conditional_mark_entries = Array.from(loaf_entry.userTimingEntries)
    .filter(entry => entry.entryType === "mark-conditional");
  assert_equals(conditional_mark_entries.length, 2);
  assert_equals(conditional_mark_entries[0].name, "mark0");
  assert_equals(conditional_mark_entries[1].name, "mark1");

  function mark_st(i) {
    return conditional_mark_entries[i].startTime;
  }
  assert_true(mark_st(0) <= mark_st(1));

  // The mark time stamp reflects the delay of |segment_duration|.
  const d1 = mark_st(1) - mark_st(0);
  assert_true(close_enough(d1, segment_duration));

}, 'conditional user timing from a requestAnimationFrame');

promise_test(async t => {
  const loaf_entry = await expect_long_frame(async (t, busy_wait) => {
    performance.markConditional("mark0");
    busy_wait(segment_duration);
    performance.markConditional("mark1");
    await new Promise(resolve => requestAnimationFrame(() => {
      performance.markConditional("mark2");
      busy_wait(segment_duration)
      performance.markConditional("mark3");
      resolve();
    }));
  }, t);

  assert_not_equals(loaf_entry, "timeout");

  const conditional_mark_entries = Array.from(loaf_entry.userTimingEntries)
    .filter(entry => entry.entryType === "mark-conditional");
  assert_equals(conditional_mark_entries.length, 4);

  // Names should be "mark0", "mark1", ...
  for(let i = 0; i < 4; i++) {
    assert_equals(conditional_mark_entries[i].name, "mark" + i);
  }

  function mark_st(i) {
    return conditional_mark_entries[i].startTime;
  }
  // Timestamps should be increasing.
  for(let i = 0; i < 3; i++){
    assert_true(mark_st(i) <= mark_st(i + 1));
  }

  // The mark time stamp reflects the delay of |segment_duration|.
  for(let i = 0; i < 2; i++) {
    assert_true(close_enough(mark_st(i * 2 + 1) - mark_st(i * 2), segment_duration));
  }

}, 'conditional user timing from a task and a requestAnimationFrame');

promise_test(async t => {
  const loaf_entry = await expect_long_frame(async (t, busy_wait) => {

    const element = document.createElement("div");
    document.body.appendChild(element);
    t.add_cleanup(() => element.remove());
    performance.markConditional("mark0");
    busy_wait(segment_duration);
    performance.markConditional("mark1");
    requestAnimationFrame(() => {
      performance.markConditional("mark2");
      busy_wait(segment_duration)
      performance.markConditional("mark3");
    });
    new ResizeObserver(() => {
      performance.markConditional("mark4");
      busy_wait(segment_duration);
      performance.markConditional("mark5");
    }).observe(element);

  }, t);

  assert_not_equals(loaf_entry, "timeout");

  const conditional_mark_entries = Array.from(loaf_entry.userTimingEntries)
    .filter(entry => entry.entryType === "mark-conditional");
  assert_equals(conditional_mark_entries.length, 6);

  // Names should be "mark0", "mark1", ...
  for(let i = 0; i < 6; i++) {
    assert_equals(conditional_mark_entries[i].name, "mark" + i);
  }

  function mark_st(i) {
    return conditional_mark_entries[i].startTime;
  }
  // Timestamps should be increasing.
  for(let i = 0; i < 5; i++){
    assert_true(mark_st(i) <= mark_st(i + 1));
  }

  // The mark time stamp reflects the delay of |segment_duration|.
  for(let i = 0; i < 3; i++) {
    assert_true(close_enough(mark_st( i * 2 + 1) - mark_st(i * 2), segment_duration));
  }

}, 'conditional user timing from a task, a requestAnimationFrame, and layout change');
</script>
</body>