<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../resources/runner.js"></script>
<style>
#target {
    display: none;
}
</style>
<style id="a" media="print">
#target {
    display: block;
    width: 280px;
}
</style>
<style id="b" media="print">
#target {
    display: block;
    width: 300px;
}
</style>
<style id="c" media="print">
#target {
    display: block;
    width: 290px;
}
</style>
</head>
<body>
    <pre id="log"></pre>
    <div id="target" style="font-family: system-ui;">
    <p>😎</p>
    </div>
    <script>
        var target = document.getElementById("target");
        var a = document.getElementById("a");
        var b = document.getElementById("b");
        var c = document.getElementById("c");

        function test() {
            a.media = "screen";
            target.offsetLeft;
            b.media = "screen";
            target.offsetLeft;
            c.media = "screen";
            target.offsetLeft;
            a.media = "print";
            b.media = "print";
            c.media = "print";
        }

        PerfTestRunner.measureRunsPerSecond({ run: test });
    </script>
</body>
</html>