<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[197908] trunk/PerformanceTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/197908">197908</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2016-03-09 17:37:35 -0800 (Wed, 09 Mar 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs">trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometerresourcesextensionsjs">trunk/PerformanceTests/Animometer/resources/extensions.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometerresourcesrunnertestsjs">trunk/PerformanceTests/Animometer/resources/runner/tests.js</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterinternationalhtml">trunk/PerformanceTests/Animometer/tests/master/international.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmasterresourcestextjs">trunk/PerformanceTests/Animometer/tests/master/resources/text.js</a></li>
<li><a href="#trunkPerformanceTestsAnimometertestsmastertexthtml">trunk/PerformanceTests/Animometer/tests/master/text.html</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li>trunk/PerformanceTests/Animometer/tests/text/</li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerresourcesdebugrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/tests.js (197907 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -160,15 +160,7 @@
</span><span class="cx"> {
</span><span class="cx"> url: "bouncing-particles/bouncing-css-images.html?particleWidth=80&particleHeight=80&imageSrc=../resources/yin-yang.svg",
</span><span class="cx"> name: "CSS bouncing SVG images"
</span><del>- },
- {
- url: "text/layering-text.html",
- name: "CSS layering text"
- },
- {
- url: "text/text-boxes.html?particleWidth=280&particleHeight=180",
- name: "CSS text boxes"
- },
</del><ins>+ }
</ins><span class="cx"> ]
</span><span class="cx"> ));
</span><span class="cx">
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerresourcesextensionsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/extensions.js (197907 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -314,6 +314,76 @@
</span><span class="cx"> parseFloat(styles.paddingTop));
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+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;
+ }
+});
+
</ins><span class="cx"> SimplePromise = Utilities.createClass(
</span><span class="cx"> function()
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerresourcesrunnertestsjs"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/resources/runner/tests.js (197907 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -33,6 +33,10 @@
</span><span class="cx"> name: "Canvas line segments"
</span><span class="cx"> },
</span><span class="cx"> {
</span><ins>+ url: "master/text.html",
+ name: "A to Z"
+ },
+ {
</ins><span class="cx"> url: "master/focus.html",
</span><span class="cx"> name: "Focus"
</span><span class="cx"> },
</span><span class="lines">@@ -41,6 +45,10 @@
</span><span class="cx"> name: "Images"
</span><span class="cx"> },
</span><span class="cx"> {
</span><ins>+ url: "master/international.html",
+ name: "Design"
+ },
+ {
</ins><span class="cx"> url: "master/particles.html",
</span><span class="cx"> name: "DOM particles, SVG masks"
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterinternationalhtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/international.html (0 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="resources/stage.css">
+ <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="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../../resources/statistics.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="resources/text.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmasterresourcestextjs"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/resources/text.js (0 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,104 @@
</span><ins>+(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;
+
+}());
</ins></span></pre></div>
<a id="trunkPerformanceTestsAnimometertestsmastertexthtml"></a>
<div class="addfile"><h4>Added: trunk/PerformanceTests/Animometer/tests/master/text.html (0 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" type="text/css" href="resources/stage.css">
+ <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="../../resources/strings.js"></script>
+ <script src="../../resources/extensions.js"></script>
+ <script src="../../resources/statistics.js"></script>
+ <script src="../resources/math.js"></script>
+ <script src="../resources/main.js"></script>
+ <script src="resources/text.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (197907 => 197908)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2016-03-10 01:35:18 UTC (rev 197907)
+++ trunk/PerformanceTests/ChangeLog 2016-03-10 01:37:35 UTC (rev 197908)
</span><span class="lines">@@ -1,5 +1,31 @@
</span><span class="cx"> 2016-03-09 Jon Lee <jonlee@apple.com>
</span><span class="cx">
</span><ins>+ 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 <jonlee@apple.com>
+
</ins><span class="cx"> Add a new image test
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=155232
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>