Add StyleBench subtest for dynamic media query performance
authorantti@apple.com <antti@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 16 Dec 2019 17:57:52 +0000 (17:57 +0000)
committerantti@apple.com <antti@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 16 Dec 2019 17:57:52 +0000 (17:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=205263

Reviewed by Zalan Bujtas.

Add a subtest that contains a small number of rules inside min/max-width media queries.
The test is executed by resizing the test frame to various widths.

* StyleBench/index.html:
* StyleBench/resources/style-bench.js:
(Random.prototype.chance):
(defaultConfiguration):
(mediaQueryConfiguration):
(predefinedConfigurations):
* StyleBench/resources/tests.js:
(makeSteps):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@253560 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/ChangeLog
PerformanceTests/StyleBench/index.html
PerformanceTests/StyleBench/resources/style-bench.js
PerformanceTests/StyleBench/resources/tests.js

index 9d7da66..2ceafed 100644 (file)
@@ -1,3 +1,22 @@
+2019-12-16  Antti Koivisto  <antti@apple.com>
+
+        Add StyleBench subtest for dynamic media query performance
+        https://bugs.webkit.org/show_bug.cgi?id=205263
+
+        Reviewed by Zalan Bujtas.
+
+        Add a subtest that contains a small number of rules inside min/max-width media queries.
+        The test is executed by resizing the test frame to various widths.
+
+        * StyleBench/index.html:
+        * StyleBench/resources/style-bench.js:
+        (Random.prototype.chance):
+        (defaultConfiguration):
+        (mediaQueryConfiguration):
+        (predefinedConfigurations):
+        * StyleBench/resources/tests.js:
+        (makeSteps):
+
 2019-10-26  Chris Lord  <clord@igalia.com>
 
         Put OffscreenCanvas behind a build flag
index c77554d..85fa1cf 100644 (file)
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>StyleBench 0.3</title>
+    <title>StyleBench 0.4</title>
     <link rel="stylesheet" href="resources/main.css">
     <script src="resources/main.js" defer></script>
     <script src="resources/benchmark-runner.js" defer></script>
index f2dc175..201ccba 100644 (file)
@@ -19,6 +19,8 @@ class Random
 
     chance(chance)
     {
+        if (!chance)
+            return false;
         return this.underOne() < chance;
     }
 
@@ -72,9 +74,12 @@ class StyleBench
             repeatingSequenceChance: 0.2,
             repeatingSequenceMaximumLength: 3,
             leafMutationChance: 0.1,
+            mediaQueryChance: 0,
+            mediaQueryCloseChance: 0,
             styleSeed: 1,
             domSeed: 2,
             stepCount: 5,
+            isResizeTest: false,
             mutationsPerStep: 100,
         };
     }
@@ -132,6 +137,18 @@ class StyleBench
         });
     }
 
+    static mediaQueryConfiguration()
+    {
+        return Object.assign(this.defaultConfiguration(), {
+            name: 'Dynamic media queries',
+            isResizeTest : true,
+            mediaQueryChance: 0.01,
+            mediaQueryCloseChance: 0.3,
+            starChance: 0,
+            elementCount: 5000,
+        });
+    }
+
     static predefinedConfigurations()
     {
         return [
@@ -140,6 +157,7 @@ class StyleBench
             this.structuralPseudoClassConfiguration(),
             this.nthPseudoClassConfiguration(),
             this.beforeAndAfterConfiguration(),
+            this.mediaQueryConfiguration(),
         ];
     }
 
@@ -310,11 +328,33 @@ class StyleBench
         return selector + " { " + this.makeDeclaration(selector) + " }";
     }
 
+    makeMediaQuery()
+    {
+        let width = this.random.number(500);
+        width = 300 + width - (width % 100);
+        if (this.random.chance(0.5))
+            return `@media (min-width: ${width}px) {`;
+        return `@media (max-width: ${width}px) {`;
+    }
+
     makeStylesheet(size)
     {
         let cssText = "";
-        for (let i = 0; i < size; ++i)
+
+        let inMediaQuery = false;
+        for (let i = 0; i < size; ++i) {
+            if (!inMediaQuery && this.random.chance(this.configuration.mediaQueryChance)) {
+                cssText += this.makeMediaQuery() + "\n";;
+                inMediaQuery = true;
+            }
+
             cssText += this.makeRule() + "\n";
+
+            if (inMediaQuery && this.random.chance(this.configuration.mediaQueryCloseChance)) {
+                 cssText += "}\n";
+                 inMediaQuery = false;
+             }
+        }
         return cssText;
     }
 
@@ -496,6 +536,11 @@ class StyleBench
         }
     }
 
+    resizeViewToWidth(width)
+    {
+        window.frameElement.style.width = width + "px";
+    }
+
     async runForever()
     {
         while (true) {
index 8577831..e9c42b0 100644 (file)
@@ -1,7 +1,15 @@
 function makeSteps(configuration)
 {
     const steps = [];
-    for (i = 0; i < configuration.stepCount; ++i) {
+    for (let i = 0; i < configuration.stepCount; ++i) {
+        if (configuration.isResizeTest) {
+            for (let width = 300; width <= 800; width += 50) {
+                steps.push(new BenchmarkTestStep(`Resizing to ${width}px - ${i}`, (bench, contentWindow, contentDocument) => {
+                    bench.resizeViewToWidth(width);
+                }));
+            }
+            continue;
+        }
         steps.push(new BenchmarkTestStep(`Adding classes - ${i}`, (bench, contentWindow, contentDocument) => {
             bench.addClasses(configuration.mutationsPerStep);
         }));