/share/WebKit/192884/reduction.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
</head>
<body>
    <div id="target">Runs various observer callbacks</div>
    <script>
function sleep(ms) {
    let now = Date.now();
    while ((Date.now() - now) < ms);
}

(function performanceObserver() {
    let observer = new PerformanceObserver(function performanceObserverCallback(list) {
        console.log("PerformanceObserver callback", list);
        sleep(20);
    });
    observer.observe({entryTypes: ["mark"]});
    performance.mark("mark");

    sleep(5);
})();

(function mutationObserver() {
    let targetElement = document.getElementById("target");
    let observer = new MutationObserver(function mutationObserverCallback(mutations) {
        console.log("MutationObserver callback", mutations);
        sleep(20);
    });
    observer.observe(targetElement, {childList: true});
    targetElement.appendChild(document.createElement("p"));

    sleep(5);
})();

(function intersectionObserver() {
    let observer = new IntersectionObserver(function intersectionObserverCallback(observations) {
        console.log("IntersectionObserver Callback", observations);
        sleep(20);
    }, {
        threshold: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
        rootMargin: 0,
    });

    let targetElement = document.getElementById("target");
    observer.observe(target);

    sleep(5);
})();
    </script>
</body>
</html>