Changeset 202601 in webkit


Ignore:
Timestamp:
Jun 28, 2016 6:52:14 PM (8 years ago)
Author:
jonlee@apple.com
Message:

Update focus test
​https://bugs.webkit.org/show_bug.cgi?id=159242
rdar://problem/27070007

Reviewed by Dean Jackson.
Provisionally reviewed by Said Abou-Hallawa.

Move previous test to dom suite, and update the test for better reporting of frame rate, although
it uses a different rendering path.

  • Animometer/resources/debug-runner/tests.js: Add to dom suite.
  • Animometer/tests/dom/focus.html: Copied from PerformanceTests/Animometer/tests/master/focus.html.
  • Animometer/tests/dom/resources/focus.js: Copied from PerformanceTests/Animometer/tests/master/resources/focus.js.
  • Animometer/tests/master/focus.html: Remove center element.
  • Animometer/tests/master/resources/focus.js: Use narrower size range with smaller particles. Remove the

container elements. Inline getBlurValue and getOpacityValue since they are only called once.

Location:
trunk/PerformanceTests
Files:
4 edited
2 copied

Legend:

Unmodified
Added
Removed

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

    r202314 r202601  
    171171        },
    172172        {
     173            url: "dom/focus.html",
     174            name: "Focus 2.0"
     175        },
     176        {
    173177            url: "dom/particles.html",
    174178            name: "DOM particles, SVG masks"

  • trunk/PerformanceTests/Animometer/tests/dom/resources/focus.js

    r202600 r202601  
    1414        var size = minimumDiameter + sizeVariance;
    1515
    16         // size and blurring are a function of depth
     16        // Size and blurring are a function of depth.
    1717        this._depth = Pseudo.random();
    1818        var distance = Utilities.lerp(this._depth, 0, sizeVariance);
    … …  
    135135        this._focalPoint = focusProgress;
    136136
    137         // update center element before loop
    138137        Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
    139138

  • trunk/PerformanceTests/Animometer/tests/master/focus.html

    r202315 r202601  
    88    #stage {
    99        background-color: #201A1F;
    10         z-index: -10000;
    1110    }
    1211
    13     #stage > div {
    14         position: absolute;
    15         overflow: hidden;
    16     }
    17     #stage div div {
     12    #stage div {
    1813        position: absolute;
    1914        background-color: #DEDADD;
    2015        border-radius: 50%;
     16        display: none;
    2117    }
    22 
    23     #center-text {
    24         font-size: 90%;
    25         transform: translate3d(-50%, -50%, 0);
    26     }
    27 
    28     #center-text span {
    29         position: absolute;
    30         color: #201A1F;
    31         font-weight: 400;
    32         font-size: 2em;
    33         top: 50%;
    34         left: 50%;
    35         transform: translate(-50%, -50%);
    36     }
    37 
    3818    </style>
    3919</head>
    4020<body>
    41     <div id="stage">
    42         <div id="center-text"><div><span>focus</span></div></div>
    43     </div>
     21    <div id="stage"></div>
    4422    <script src="../../resources/strings.js"></script>
    4523    <script src="../../resources/extensions.js"></script>

  • trunk/PerformanceTests/Animometer/tests/master/resources/focus.js

    r202315 r202601  
    11(function() {
    22
    3 var maxVerticalOffset = 50;
    43var minimumDiameter = 30;
    5 var centerDiameter = 90;
    6 var sizeVariance = 60;
     4var sizeVariance = 20;
    75var travelDistance = 50;
    86
     7var minBlurValue = 1;
     8var maxBlurValue = 10;
     9
    910var opacityMultiplier = 30;
     11var focusDuration = 1000;
     12var movementDuration = 2500;
    1013
    1114var FocusElement = Utilities.createClass(
    … …  
    1417        var size = minimumDiameter + sizeVariance;
    1518
    16         // size and blurring are a function of depth
     19        // Size and blurring are a function of depth.
    1720        this._depth = Pseudo.random();
    1821        var distance = Utilities.lerp(this._depth, 0, sizeVariance);
    1922        size -= distance;
    2023
    21         var top = Stage.random(0, stage.size.height - size) - stage.maxBlurValue * 3;
    22         var left = Stage.random(0, stage.size.width - size) - stage.maxBlurValue * 3;
     24        var top = Stage.random(0, stage.size.height - size);
     25        var left = Stage.random(0, stage.size.width - size);
    2326
    24         this.container = document.createElement('div');
    25         this.container.style.width = (size + stage.maxBlurValue * 6) + "px";
    26         this.container.style.height = (size + stage.maxBlurValue * 6) + "px";
    27         this.container.style.top = top + "px";
    28         this.container.style.left = left + "px";
    29         this.container.style.zIndex = Math.round((1 - this._depth) * 10);
    30 
    31         this.particle = Utilities.createElement("div", {}, this.container);
     27        this.particle = document.createElement("div");
    3228        this.particle.style.width = size + "px";
    3329        this.particle.style.height = size + "px";
    34         this.particle.style.top = (stage.maxBlurValue * 3) + "px";
    35         this.particle.style.left = (stage.maxBlurValue * 3) + "px";
     30        this.particle.style.top = top + "px";
     31        this.particle.style.left = left + "px";
     32        this.particle.style.zIndex = Math.round((1 - this._depth) * 10);
    3633
    3734        var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
    3835        this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
    3936        this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
     37
     38        this.animate(stage, 0, 0);
    4039    }, {
    4140
    4241    hide: function()
    4342    {
    44         this.container.style.display = "none";
     43        this.particle.style.display = "none";
    4544    },
    4645
    4746    show: function()
    4847    {
    49         this.container.style.display = "block";
     48        this.particle.style.display = "block";
    5049    },
    5150
    … …  
    5453        var top = sinFactor * this._sinMultiplier;
    5554        var left = cosFactor * this._cosMultiplier;
     55        var distance = Math.abs(this._depth - stage.focalPoint);
     56        var blur = Utilities.lerp(distance, minBlurValue, maxBlurValue);
     57        var opacity = Math.max(5, opacityMultiplier * (1 - distance));
    5658
    57         Utilities.setElementPrefixedProperty(this.container, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
    58         this.container.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
     59        Utilities.setElementPrefixedProperty(this.particle, "filter", "blur(" + blur + "px) opacity(" + opacity + "%)");
     60        this.particle.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
    5961    }
    6062});
    … …  
    6668    }, {
    6769
    68     movementDuration: 2500,
    69     focusDuration: 1000,
    70 
    71     centerObjectDepth: 0.0,
    72 
    73     minBlurValue: 1.5,
    74     maxBlurValue: 15,
    75     maxCenterObjectBlurValue: 5,
    76 
    7770    initialize: function(benchmark, options)
    7871    {
    … …  
    8073
    8174        this._testElements = [];
    82         this._focalPoint = 0.5;
    8375        this._offsetIndex = 0;
    84 
    85         this._centerElement = document.getElementById("center-text");
    86         this._centerElement.style.width = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
    87         this._centerElement.style.height = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
    88         this._centerElement.style.zIndex = Math.round(10 * this.centerObjectDepth);
    89 
    90         var particle = document.querySelector("#center-text div");
    91         particle.style.width = centerDiameter + "px";
    92         particle.style.height = centerDiameter + "px";
    93         particle.style.top = (this.maxCenterObjectBlurValue * 3) + "px";
    94         particle.style.left = (this.maxCenterObjectBlurValue * 3) + "px";
    95 
    96         var blur = this.getBlurValue(this.centerObjectDepth, true);
    97         Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + blur + "px)");
     76        this.focalPoint = 0.5;
    9877    },
    9978
    10079    complexity: function()
    10180    {
    102         return 1 + this._offsetIndex;
     81        return this._offsetIndex;
    10382    },
    10483
    … …  
    11998            var obj = new FocusElement(this);
    12099            this._testElements.push(obj);
    121             this.element.appendChild(obj.container);
     100            this.element.appendChild(obj.particle);
    122101        }
    123102        for (var i = this._offsetIndex; i < newIndex; ++i)
    … …  
    129108    {
    130109        var time = this._benchmark.timestamp;
    131         var sinFactor = Math.sin(time / this.movementDuration);
    132         var cosFactor = Math.cos(time / this.movementDuration);
     110        var sinFactor = Math.sin(time / movementDuration);
     111        var cosFactor = Math.cos(time / movementDuration);
    133112
    134         var focusProgress = 0.5 + 0.5 * Math.sin(time / this.focusDuration);
    135         this._focalPoint = focusProgress;
    136 
    137         // update center element before loop
    138         Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
     113        this.focalPoint = 0.5 + 0.5 * Math.sin(time / focusDuration);
    139114
    140115        for (var i = 0; i < this._offsetIndex; ++i)
    141116            this._testElements[i].animate(this, sinFactor, cosFactor);
    142     },
    143 
    144     getBlurValue: function(depth, isCenter)
    145     {
    146         if (isCenter)
    147             return 1 + Math.abs(depth - this._focalPoint) * (this.maxCenterObjectBlurValue - 1);
    148 
    149         return Utilities.lerp(Math.abs(depth - this._focalPoint), this.minBlurValue, this.maxBlurValue);
    150     },
    151 
    152     getOpacityValue: function(depth)
    153     {
    154         return Math.max(1, opacityMultiplier * (1 - Math.abs(depth - this._focalPoint)));
    155     },
     117    }
    156118});
    157119

  • trunk/PerformanceTests/ChangeLog

    r202591 r202601  
     12016-06-28  Jon Lee  <jonlee@apple.com>
     2
     3        Update focus test
     4        https://bugs.webkit.org/show_bug.cgi?id=159242
     5        rdar://problem/27070007
     6
     7        Reviewed by Dean Jackson.
     8        Provisionally reviewed by Said Abou-Hallawa.
     9
     10        Move previous test to dom suite, and update the test for better reporting of frame rate, although
     11        it uses a different rendering path.
     12
     13        * Animometer/resources/debug-runner/tests.js: Add to dom suite.
     14        * Animometer/tests/dom/focus.html: Copied from PerformanceTests/Animometer/tests/master/focus.html.
     15        * Animometer/tests/dom/resources/focus.js: Copied from PerformanceTests/Animometer/tests/master/resources/focus.js.
     16        * Animometer/tests/master/focus.html: Remove center element.
     17        * Animometer/tests/master/resources/focus.js: Use narrower size range with smaller particles. Remove the
     18        container elements. Inline getBlurValue and getOpacityValue since they are only called once.
     19
    1202016-06-28  Filip Pizlo  <fpizlo@apple.com>
    221
Note: See TracChangeset for help on using the changeset viewer.