Changeset 196381 in webkit

Timestamp:

Feb 10, 2016 12:45:01 PM (8 years ago)

Author:

Said Abou-Hallawa

Message:

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.

Location:

trunk/PerformanceTests

Files:

• Animometer/resources/debug-runner/tests.js (modified) (1 diff)
• Animometer/resources/extensions.js (modified) (1 diff)
• Animometer/tests/bouncing-particles/resources/bouncing-css-shapes.js (modified) (1 diff)
• Animometer/tests/bouncing-particles/resources/bouncing-particles.js (modified) (1 diff)
• Animometer/tests/resources/main.js (modified) (1 diff)
• ChangeLog (modified) (1 diff)

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

@@ -131 +131 @@
         },
         {
+            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"

trunk/PerformanceTests/Animometer/resources/extensions.js

@@ -83 +83 @@
         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;
     }
 };

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

@@ -18 +18 @@
             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();

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

@@ -85 +85 @@
         this.fill = options["fill"] || "solid";
         this.clip = options["clip"] || "";
+        this.blend = options["blend"] || false;
+        this.filter = options["filter"] || false;
     },
 

trunk/PerformanceTests/Animometer/tests/resources/main.js

@@ -767 +767 @@
     },
 
+    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)
     {

trunk/PerformanceTests/ChangeLog

@@ +1 @@
+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>