Add internal benchmark tests for CSS mix-blend-modes and filters

https://bugs.webkit.org/show_bug.cgi?id=154058

Provisionally reviewed by Jon Lee.

* Animometer/resources/debug-runner/tests.js: Include the new tests in the
"HTML suite" of the debug runner.

* Animometer/resources/extensions.js:
(Utilities.browserPrefix):
(Utilities.setElementPrefixedProperty): Utility functions to allow setting
prefixed style properties.

* Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
Set the mix-blend-mode and the filter to some random values if the options
of the test requested that.

* Animometer/tests/bouncing-particles/resources/bouncing-particles.js:
(parseShapeParameters): Parse the url options "blend" and "filter" and set
the corresponding flags.

* Animometer/tests/resources/main.js:
(randomStyleMixBlendMode):
(randomStyleFilter): Return random mix-blend-mode and filter.


Canonical link: https://commits.webkit.org/172183@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196381 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/Animometer/resources/debug-runner/tests.js

@@ -129,6 +129,14 @@ Suites.push(new Suite("HTML suite",
             url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=50&particleHeight=50&shape=circle&fill=gradient",
             name: "CSS bouncing gradient circles"
         },
+        {
+            url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=80&particleHeight=80&shape=circle&blend",
+            name: "CSS bouncing blend circles"
+        },
+        {
+            url: "bouncing-particles/bouncing-css-shapes.html?particleWidth=80&particleHeight=80&shape=circle&filter",
+            name: "CSS bouncing filter circles"
+        },
         {
             url: "bouncing-particles/bouncing-css-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.svg",
             name: "CSS bouncing SVG images"

PerformanceTests/Animometer/resources/extensions.js

@@ -82,6 +82,40 @@ Utilities =
 
         parentElement.appendChild(element);
         return element;
+    },
+
+    browserPrefix: function()
+    {
+        // Get the HTML element's CSSStyleDeclaration
+        var styles = window.getComputedStyle(document.documentElement, '');
+
+        // Convert the styles list to an array
+        var stylesArray = Array.prototype.slice.call(styles);
+
+        // Concatenate all the styles in one big string
+        var stylesString = stylesArray.join('');
+
+        // Search the styles string for a known prefix type, settle on Opera if none is found.
+        var prefixes = stylesString.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']);
+
+        // prefixes has two elements; e.g. for webkit it has ['-webkit-', 'webkit'];
+        var prefix = prefixes[1];
+
+        // Have 'O' before 'Moz' in the string so it is matched first.
+        var dom = ('WebKit|O|Moz|MS').match(new RegExp(prefix, 'i'))[0];
+
+        // Return all the required prefixes.
+        return {
+            dom: dom,
+            lowercase: prefix,
+            css: '-' + prefix + '-',
+            js: prefix[0].toUpperCase() + prefix.substr(1)
+        };
+    },
+
+    setElementPrefixedProperty: function(element, property, value)
+    {
+        element.style[property] = element.style[this.browserPrefix().js + property[0].toUpperCase() + property.substr(1)] = value;
     }
 };
 

PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js

@@ -18,6 +18,13 @@ BouncingCssShape = Utilities.createSubclass(BouncingParticle,
             break;
         }
 
+        if (stage.blend)
+            this.element.style.mixBlendMode = Stage.randomStyleMixBlendMode();
+
+        // Some browsers have not un-prefixed the css filter yet.
+        if (stage.filter)
+            Utilities.setElementPrefixedProperty(this.element, "filter", Stage.randomStyleFilter());
+
         this._move();
     }, {
 

PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-particles.js

@@ -84,6 +84,8 @@ BouncingParticlesStage = Utilities.createSubclass(Stage,
         this.shape = options["shape"] || "circle";
         this.fill = options["fill"] || "solid";
         this.clip = options["clip"] || "";
+        this.blend = options["blend"] || false;
+        this.filter = options["filter"] || false;
     },
 
     animate: function(timeDelta)

PerformanceTests/Animometer/tests/resources/main.js

@@ -766,6 +766,48 @@ Utilities.extendObject(Stage, {
             + this.randomInt(min, max).toString(16);
     },
 
+    randomStyleMixBlendMode: function()
+    {
+        var mixBlendModeList = [
+          'normal',
+          'multiply',
+          'screen',
+          'overlay',
+          'darken',
+          'lighten',
+          'color-dodge',
+          'color-burn',
+          'hard-light',
+          'soft-light',
+          'difference',
+          'exclusion',
+          'hue',
+          'saturation',
+          'color',
+          'luminosity'
+        ];
+
+        return mixBlendModeList[this.randomInt(0, mixBlendModeList.length)];
+    },
+
+    randomStyleFilter: function()
+    {
+        var filterList = [
+            'grayscale(50%)',
+            'sepia(50%)',
+            'saturate(50%)',
+            'hue-rotate(180)',
+            'invert(50%)',
+            'opacity(50%)',
+            'brightness(50%)',
+            'contrast(50%)',
+            'blur(10px)',
+            'drop-shadow(10px 10px 10px gray)'
+        ];
+
+        return filterList[this.randomInt(0, filterList.length)];
+    },
+
     rotatingColor: function(cycleLengthMs, saturation, lightness)
     {
         return "hsl("

PerformanceTests/ChangeLog

@@ -1,3 +1,30 @@
+2016-02-09  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        Add internal benchmark tests for CSS mix-blend-modes and filters
+        https://bugs.webkit.org/show_bug.cgi?id=154058
+
+        Provisionally reviewed by Jon Lee.
+
+        * Animometer/resources/debug-runner/tests.js: Include the new tests in the
+        "HTML suite" of the debug runner.
+
+        * Animometer/resources/extensions.js:
+        (Utilities.browserPrefix):
+        (Utilities.setElementPrefixedProperty): Utility functions to allow setting
+        prefixed style properties.
+
+        * Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js:
+        Set the mix-blend-mode and the filter to some random values if the options
+        of the test requested that.
+
+        * Animometer/tests/bouncing-particles/resources/bouncing-particles.js:
+        (parseShapeParameters): Parse the url options "blend" and "filter" and set
+        the corresponding flags.
+
+        * Animometer/tests/resources/main.js:
+        (randomStyleMixBlendMode):
+        (randomStyleFilter): Return random mix-blend-mode and filter.
+
 2016-02-08  Jon Lee  <jonlee@apple.com>
 
         Add a ramp controller