Diff
Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (197907 => 197908)
--- trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-03-10 01:35:18 UTC (rev 197907)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js 2016-03-10 01:37:35 UTC (rev 197908)
@@ -160,15 +160,7 @@
{
url: "bouncing-particles/bouncing-css-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.svg",
name: "CSS bouncing SVG images"
- },
- {
- url: "text/layering-text.html",
- name: "CSS layering text"
- },
- {
- url: "text/text-boxes.html?particleWidth=280&particleHeight=180",
- name: "CSS text boxes"
- },
+ }
]
));
Modified: trunk/PerformanceTests/Animometer/resources/extensions.js (197907 => 197908)
--- trunk/PerformanceTests/Animometer/resources/extensions.js 2016-03-10 01:35:18 UTC (rev 197907)
+++ trunk/PerformanceTests/Animometer/resources/extensions.js 2016-03-10 01:37:35 UTC (rev 197908)
@@ -314,6 +314,76 @@
parseFloat(styles.paddingTop));
}
+UnitBezier = Utilities.createClass(
+ function(point1, point2)
+ {
+ // First and last points in the Bézier curve are assumed to be (0,0) and (!,1)
+ this._c = point1.multiply(3);
+ this._b = point2.subtract(point1).multiply(3).subtract(this._c);
+ this._a = new Point(1, 1).subtract(this._c).subtract(this._b);
+ }, {
+
+ epsilon: 1e-5,
+ derivativeEpsilon: 1e-6,
+
+ solve: function(x)
+ {
+ return this.sampleY(this.solveForT(x));
+ },
+
+ sampleX: function(t)
+ {
+ return ((this._a.x * t + this._b.x) * t + this._c.x) * t;
+ },
+
+ sampleY: function(t)
+ {
+ return ((this._a.y * t + this._b.y) * t + this._c.y) * t;kkkj
+ },
+
+ sampleDerivativeX: function(t)
+ {
+ return(3 * this._a.x * t + 2 * this._b.x) * t + this._c.x;
+ },
+
+ solveForT: function(x)
+ {
+ var t0, t1, t2, x2, d2, i;
+
+ for (t2 = x, i = 0; i < 8; ++i) {
+ x2 = this.sampleX(t2) - x;
+ if (Math.abs(x2) < this.epsilon)
+ return t2;
+ d2 = this.sampleDerivativeX(t2);
+ if (Math.abs(d2) < this.derivativeEpsilon)
+ break;
+ t2 = t2 - x2 / d2;
+ }
+
+ t0 = 0;
+ t1 = 1;
+ t2 = x;
+
+ if (t2 < t0)
+ return t0;
+ if (t2 > t1)
+ return t1;
+
+ while (t0 < t1) {
+ x2 = this.sampleX(t2);
+ if (Math.abs(x2 - x) < this.epsilon)
+ return t2;
+ if (x > x2)
+ t0 = t2;
+ else
+ t1 = t2;
+ t2 = (t1 - t0) * .5 + t0;
+ }
+
+ return t2;
+ }
+});
+
SimplePromise = Utilities.createClass(
function()
{
Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (197907 => 197908)
--- trunk/PerformanceTests/Animometer/resources/runner/tests.js 2016-03-10 01:35:18 UTC (rev 197907)
+++ trunk/PerformanceTests/Animometer/resources/runner/tests.js 2016-03-10 01:37:35 UTC (rev 197908)
@@ -33,6 +33,10 @@
name: "Canvas line segments"
},
{
+ url: "master/text.html",
+ name: "A to Z"
+ },
+ {
url: "master/focus.html",
name: "Focus"
},
@@ -41,6 +45,10 @@
name: "Images"
},
{
+ url: "master/international.html",
+ name: "Design"
+ },
+ {
url: "master/particles.html",
name: "DOM particles, SVG masks"
},
Added: trunk/PerformanceTests/Animometer/tests/master/international.html (0 => 197908)
--- trunk/PerformanceTests/Animometer/tests/master/international.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/international.html 2016-03-10 01:37:35 UTC (rev 197908)
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href=""
+ <style type="text/css">
+
+ #stage {
+ font-family: Helvetica;
+ font-size: 48px;
+ }
+ #stage div {
+ width: 60%;
+ position: absolute;
+ text-align: center;
+ }
+ #template {
+ color: #111;
+ }
+ </style>
+</head>
+<body>
+ <div id="stage">
+ <div id="template">
+ <p>设计</p>
+ <p class="rtl">تصميم</p>
+ <p>дизайн</p>
+ <p>デザイン</p>
+ <p class="rtl">עיצוב</p>
+ <p>디자인</p>
+ </div>
+ </div>
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+</body>
+</html>
Added: trunk/PerformanceTests/Animometer/tests/master/resources/text.js (0 => 197908)
--- trunk/PerformanceTests/Animometer/tests/master/resources/text.js (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/text.js 2016-03-10 01:37:35 UTC (rev 197908)
@@ -0,0 +1,104 @@
+(function() {
+
+var TextStage = Utilities.createSubclass(Stage,
+ function()
+ {
+ Stage.call(this);
+
+ this.testElements = [];
+ this._offsetIndex = 0;
+ }, {
+
+ shadowFalloff: new UnitBezier(new Point(0.015, 0.750), new Point(0.755, 0.235)),
+ shimmerAverage: 0.4,
+ shimmerMax: 0.5,
+ millisecondsPerRotation: 1000 / (.26 * Math.PI * 2),
+ particleDistance: 1,
+ lightnessMin: 13,
+ lightnessMax: 94,
+
+ initialize: function(benchmark)
+ {
+ Stage.prototype.initialize.call(this, benchmark);
+
+ this._template = document.getElementById("template");
+ this._offset = this.size.subtract(Point.elementClientSize(this._template)).multiply(.5);
+ this._template.style.left = this._offset.width + "px";
+ this._template.style.top = this._offset.height + "px";
+
+ this._stepProgress = 0;
+ },
+
+ tune: function(count)
+ {
+ if (count == 0)
+ return;
+
+ if (count < 0) {
+ this._offsetIndex = Math.max(this._offsetIndex + count, 0);
+ for (var i = this._offsetIndex; i < this.testElements.length; ++i)
+ this.testElements[i].style.visibility = "hidden";
+
+ this._stepProgress = 1 / this._offsetIndex;
+ return;
+ }
+
+ this._offsetIndex = this._offsetIndex + count;
+ this._stepProgress = 1 / this._offsetIndex;
+
+ var index = Math.min(this._offsetIndex, this.testElements.length);
+ for (var i = 0; i < index; ++i)
+ this.testElements[i].style.visibility = "visible";
+
+ if (this._offsetIndex <= this.testElements.length)
+ return;
+
+ for (var i = this.testElements.length; i < this._offsetIndex; ++i) {
+ var clone = this._template.cloneNode(true);
+ this.testElements.push(clone);
+ this.element.insertBefore(clone, this.element.firstChild);
+ }
+ },
+
+ animate: function(timeDelta) {
+ var angle = Stage.dateCounterValue(this.millisecondsPerRotation);
+
+ var x = 0;
+ var y = 0;
+ var progress = 0;
+ var stepX = Math.sin(angle) * this.particleDistance;
+ var stepY = Math.cos(angle) * this.particleDistance;
+ for (var i = 0; i < this._offsetIndex; ++i) {
+ x += stepX;
+ y += stepY;
+
+ var element = this.testElements[i];
+
+ var colorProgress = this.shadowFalloff.solve(progress);
+ var shimmer = Math.sin(Stage.dateCounterValue(100) - colorProgress);
+ colorProgress += Utilities.lerp(shimmer, this.shimmerAverage, this.shimmerMax);
+ var interpolatedLightness = Math.round(Utilities.lerp(Math.max(Math.min(colorProgress, 1), 0), this.lightnessMin, this.lightnessMax));
+
+ element.style.color = "hsl(0,0%," + interpolatedLightness + "%)";
+ element.style.transform = "translateX(" + Math.floor(y) + "px) translateY(" + Math.floor(x) + "px)";
+
+ progress += this._stepProgress;
+ }
+ },
+
+ complexity: function()
+ {
+ return 1 + this._offsetIndex;
+ }
+});
+
+var TextBenchmark = Utilities.createSubclass(Benchmark,
+ function(options)
+ {
+ Benchmark.call(this, new TextStage(), options);
+ }
+);
+
+window.benchmarkClass = TextBenchmark;
+
+}());
Added: trunk/PerformanceTests/Animometer/tests/master/text.html (0 => 197908)
--- trunk/PerformanceTests/Animometer/tests/master/text.html (rev 0)
+++ trunk/PerformanceTests/Animometer/tests/master/text.html 2016-03-10 01:37:35 UTC (rev 197908)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href=""
+ <style type="text/css">
+
+ #stage {
+ font-family: Helvetica;
+ font-size: 48px;
+ }
+ #stage div {
+ width: 21em;
+ position: absolute;
+ }
+ #template {
+ color: #111;
+ }
+ </style>
+</head>
+<body>
+ <div id="stage">
+ <div id="template">
+ Whenever the black fox jumped the squirrel gazed suspiciously. Amazingly few discotheques provide jukeboxes.
+ </div>
+ </div>
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+</body>
+</html>
Modified: trunk/PerformanceTests/ChangeLog (197907 => 197908)
--- trunk/PerformanceTests/ChangeLog 2016-03-10 01:35:18 UTC (rev 197907)
+++ trunk/PerformanceTests/ChangeLog 2016-03-10 01:37:35 UTC (rev 197908)
@@ -1,5 +1,31 @@
2016-03-09 Jon Lee <[email protected]>
+ Add text tests
+ https://bugs.webkit.org/show_bug.cgi?id=155257
+
+ Reviewed by Simon Fraser.
+
+ * Animometer/resources/extensions.js:
+ (UnitBezier.Utilities.createClass): Add a class that computes Bezier points
+ assuming that two of the control points are at (0,0) and (1,1). Taken from
+ WebCore/platform/graphics/UnitBezier.h
+ * Animometer/resources/runner/tests.js: Add a test for English text and one
+ for international text.
+ * Animometer/tests/master/international.html: Added.
+ * Animometer/tests/master/resources/text.js: Added. The test assumes there is
+ #template div which it will copy. The copies are placed behind the template, and
+ are set with different colors each frame. They are moved around with CSS transform.
+ * Animometer/tests/master/text.html: Added.
+
+ Remove the other text tests, since these ones cover the same techniques.
+ * Animometer/tests/text/layering-text.html: Removed.
+ * Animometer/tests/text/resources/layering-text.js: Removed.
+ * Animometer/tests/text/resources/text-boxes.js: Removed.
+ * Animometer/tests/text/text-boxes.html: Removed.
+ * Animometer/resources/debug-runner/tests.js:
+
+2016-03-09 Jon Lee <[email protected]>
+
Add a new image test
https://bugs.webkit.org/show_bug.cgi?id=155232
