Update focus and leaves tests
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Mar 2016 02:40:36 +0000 (02:40 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Mar 2016 02:40:36 +0000 (02:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=155825

Reviewed by Simon Fraser.

Particles would improperly disappear, before they were fully off stage. Update the calculation.
* Animometer/tests/dom/resources/leaves.js:
* Animometer/tests/master/resources/leaves.js:

* Animometer/tests/master/focus.html: Update the center element styling.
* Animometer/tests/master/resources/focus.js:
(FocusElement.Utilities.createClass): Give enough space in the container for each particle for the blur
to spread. It should be about 3x more space than the blur radius on each side.
(Stage.call.initialize): Ditto for the center element.

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

PerformanceTests/Animometer/tests/dom/resources/leaves.js
PerformanceTests/Animometer/tests/master/focus.html
PerformanceTests/Animometer/tests/master/resources/focus.js
PerformanceTests/Animometer/tests/master/resources/leaves.js
PerformanceTests/ChangeLog

index 9cef548125c7c1c1f6ffb9773d256e6ddcbf8b16..604c973667f047db936120e56b6b2c3e860e7246 100644 (file)
@@ -32,11 +32,11 @@ Leaf = Utilities.createSubclass(Particle,
         if (this._opacity > 1) {
             this._opacity = 1;
             this._opacityRate *= -1;
-        } else if (this._opacity < 0 || this._position.y > this.stage.size.y)
+        } else if (this._opacity < 0 || this._position.y > this.stage.size.height)
             this.reset();
 
-        if (this._position.x < -this.size.width || this._position.x > this.maxPosition.x)
-            this._position.x = (this._position.x + this.maxPosition.x) % this.maxPosition.x;
+        if (this._position.x < -this.size.width || this._position.x > this.stage.size.width)
+            this._position.x = this._position.x - Math.sign(this._position.x) * (this.size.width + this.stage.size.width);
         this.move();
     },
 
index 72a8533569f9c9ad1be59da9b26c515b8c577cde..731256d9413129e9e76a1df5e0ab5ab50728055f 100644 (file)
         border-radius: 50%;
     }
 
+    #center-text {
+        transform: translate3d(-50%, -50%, 0);
+    }
+
     #center-text span {
+        position: absolute;
         color: #201A1F;
         font-weight: 400;
         font-size: 2em;
-        position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate3d(-50%, -50%, 0);
+        transform: translate(-50%, -50%);
     }
 
     </style>
index 80a13ea9f0454f09889763436ea8ab5bf0c6ae7b..5672897a02d436d39d81c5911876a581f3b1889c 100644 (file)
@@ -24,8 +24,8 @@ var FocusElement = Utilities.createClass(
         var size = 2 * radius + sizeVariance - distance;
 
         this.container = document.createElement('div');
-        this.container.style.width = (size + stage.maxBlurValue * 2) + "px";
-        this.container.style.height = (size + stage.maxBlurValue * 2) + "px";
+        this.container.style.width = (size + stage.maxBlurValue * 6) + "px";
+        this.container.style.height = (size + stage.maxBlurValue * 6) + "px";
         this.container.style.top = top + "px";
         this.container.style.left = left + "px";
         this.container.style.zIndex = Math.round((1 - this._depth) * 10);
@@ -33,8 +33,9 @@ var FocusElement = Utilities.createClass(
         var particle = Utilities.createElement("div", {}, this.container);
         particle.style.width = size + "px";
         particle.style.height = size + "px";
-        particle.style.top = stage.maxBlurValue + "px";
-        particle.style.left = stage.maxBlurValue + "px";
+        particle.style.top = (stage.maxBlurValue * 3) + "px";
+        particle.style.left = (stage.maxBlurValue * 3) + "px";
+        this.particle = particle;
 
         var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
         this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier;
@@ -85,15 +86,15 @@ var FocusStage = Utilities.createSubclass(Stage,
         this._offsetIndex = 0;
 
         this._centerElement = document.getElementById("center-text");
-        this._centerElement.style.width = (centerDiameter + this.maxCenterObjectBlurValue * 2) + "px";
-        this._centerElement.style.height = (centerDiameter + this.maxCenterObjectBlurValue * 2) + "px";
+        this._centerElement.style.width = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
+        this._centerElement.style.height = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
         this._centerElement.style.zIndex = Math.round(10 * this.centerObjectDepth);
 
         var particle = document.querySelector("#center-text div");
         particle.style.width = centerDiameter + "px";
         particle.style.height = centerDiameter + "px";
-        particle.style.top = this.maxCenterObjectBlurValue + "px";
-        particle.style.left = this.maxCenterObjectBlurValue + "px";
+        particle.style.top = (this.maxCenterObjectBlurValue * 3) + "px";
+        particle.style.left = (this.maxCenterObjectBlurValue * 3) + "px";
 
         var blur = this.getBlurValue(this.centerObjectDepth, true);
         Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + blur + "px)");
index 50bd2fd07d9cd832406567c1e81acca6277f47d2..7a049836ff240f98827e9da0c567f4fb1ccf9315 100644 (file)
@@ -30,11 +30,11 @@ Leaf = Utilities.createSubclass(Particle,
         this._position.y += this._velocity.y;
 
         this._life--;
-        if (!this._life || this._position.y > this.stage.size.y)
+        if (!this._life || this._position.y > this.stage.size.height)
             this.reset();
 
-        if (this._position.x < -this.size.width || this._position.x > this.maxPosition.x)
-            this._position.x = (this._position.x + this.maxPosition.x) % this.maxPosition.x;
+        if (this._position.x < -this.size.width || this._position.x > this.stage.size.width)
+            this._position.x = this._position.x - Math.sign(this._position.x) * (this.size.width + this.stage.size.width);
         this.move();
     },
 
index 5bdcde7d2d73ca85166b91971204fd423f5ce748..d5c73b5e39f9c118176ec786865751592851d050 100644 (file)
@@ -1,3 +1,20 @@
+2016-03-23  Jon Lee  <jonlee@apple.com>
+
+        Update focus and leaves tests
+        https://bugs.webkit.org/show_bug.cgi?id=155825
+
+        Reviewed by Simon Fraser.
+
+        Particles would improperly disappear, before they were fully off stage. Update the calculation.
+        * Animometer/tests/dom/resources/leaves.js:
+        * Animometer/tests/master/resources/leaves.js:
+
+        * Animometer/tests/master/focus.html: Update the center element styling.
+        * Animometer/tests/master/resources/focus.js:
+        (FocusElement.Utilities.createClass): Give enough space in the container for each particle for the blur
+        to spread. It should be about 3x more space than the blur radius on each side.
+        (Stage.call.initialize): Ditto for the center element.
+
 2016-03-23  Jon Lee  <jonlee@apple.com>
 
         Update support for other platforms