| <!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> |