Skip to content
Permalink
Browse files
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
  • Loading branch information
shallawa committed Feb 10, 2016
1 parent f0c06eb commit 426080dd9edf077cb254fc308955ad81b86bceff
@@ -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"
@@ -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;
}
};

@@ -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();
}, {

@@ -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)
@@ -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("
@@ -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

0 comments on commit 426080d

Please sign in to comment.