Add an Animometer developer test which animates text-rich boxes
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Dec 2015 04:26:36 +0000 (04:26 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Dec 2015 04:26:36 +0000 (04:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=152544

Reviewed by Zalan Bujtas.

Add a test that draws lots of international text. This is a particle test,
moving the boxes around with absolution positioning.

* Animometer/resources/debug-runner/tests.js:
* Animometer/tests/text/resources/text-boxes.js: Added.
(BouncingTextBox):
(BouncingTextBox.prototype._move):
(BouncingTextBox.prototype.animate):
(BouncingTextBoxStage):
(BouncingTextBoxStage.prototype.createParticle):
(BouncingTextBoxStage.prototype.particleWillBeRemoved):
(BouncingTextBoxsBenchmark):
(BouncingTextBoxsBenchmark.prototype.createStage):
(window.benchmarkClient.create):
* Animometer/tests/text/text-boxes.html: Added.

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

PerformanceTests/Animometer/resources/debug-runner/tests.js
PerformanceTests/Animometer/tests/text/resources/text-boxes.js [new file with mode: 0644]
PerformanceTests/Animometer/tests/text/text-boxes.html [new file with mode: 0644]
PerformanceTests/ChangeLog

index abaeb6b..082e8b7 100644 (file)
@@ -97,6 +97,10 @@ Suites.push(new Suite("HTML suite",
             url: "text/layering-text.html",
             name: "CSS layering text"
         },
+        {
+            url: "text/text-boxes.html?particleWidth=280&particleHeight=180",
+            name: "CSS text boxes"
+        },
     ]
 ));
 
diff --git a/PerformanceTests/Animometer/tests/text/resources/text-boxes.js b/PerformanceTests/Animometer/tests/text/resources/text-boxes.js
new file mode 100644 (file)
index 0000000..e90ae71
--- /dev/null
@@ -0,0 +1,65 @@
+function BouncingTextBox(stage, sampleText)
+{
+    BouncingParticle.call(this, stage);
+
+    this.element = document.createElement("div");
+    this.element.classList.add('particle');
+    this.element.style.width = this._size.x + "px";
+    this.element.style.height = this._size.y + "px";
+    this.element.textContent = sampleText;
+    
+    stage.element.appendChild(this.element);
+    this._move();
+}
+
+BouncingTextBox.prototype = Object.create(BouncingParticle.prototype);
+BouncingTextBox.prototype.constructor = BouncingTextBox;
+
+BouncingTextBox.prototype._move = function()
+{
+    this.element.style.left = this._position.x + "px";
+    this.element.style.top = this._position.y + "px";
+}
+    
+BouncingTextBox.prototype.animate = function(timeDelta)
+{
+    BouncingParticle.prototype.animate.call(this, timeDelta);
+    this._move();
+}
+
+function BouncingTextBoxStage(element, options)
+{
+    BouncingParticlesStage.call(this, element, options);
+    this._sampleText = document.getElementById('sample-text').textContent;
+}
+
+BouncingTextBoxStage.prototype = Object.create(BouncingParticlesStage.prototype);
+BouncingTextBoxStage.prototype.constructor = BouncingTextBoxStage;
+
+BouncingTextBoxStage.prototype.createParticle = function()
+{
+    return new BouncingTextBox(this, this._sampleText);
+}
+
+BouncingTextBoxStage.prototype.particleWillBeRemoved = function(particle)
+{
+    particle.element.remove();
+}
+
+function BouncingTextBoxsBenchmark(suite, test, options, recordTable, progressBar)
+{
+    BouncingParticlesBenchmark.call(this, suite, test, options, recordTable, progressBar);
+}
+
+BouncingTextBoxsBenchmark.prototype = Object.create(BouncingParticlesBenchmark.prototype);
+BouncingTextBoxsBenchmark.prototype.constructor = BouncingTextBoxsBenchmark;
+
+BouncingTextBoxsBenchmark.prototype.createStage = function(element)
+{
+    return new BouncingTextBoxStage(element, this._options);
+}
+
+window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar)
+{
+    return new BouncingTextBoxsBenchmark(suite, test, options, recordTable, progressBar);
+}
diff --git a/PerformanceTests/Animometer/tests/text/text-boxes.html b/PerformanceTests/Animometer/tests/text/text-boxes.html
new file mode 100644 (file)
index 0000000..7881cf3
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        .text-layer {
+            position: absolute;
+            left: 0px;
+            top: 0px;
+            padding: 0.72em;
+            background-color: transparent;
+            line-height: 1.1;
+            font-size: 0.72em;
+        }
+        @media screen and (min-device-width: 1800px) {
+            .text-layer {
+                line-height: 1.2;
+                font-size: 0.96em;
+            }
+        }
+        
+        .particle {
+            position: absolute;
+            width: 280px;
+            font-size: 12px;
+            font-family: sans-serif;
+            padding: 3px;
+        }
+        
+        #sample-text {
+            display: none;
+        }
+    </style>  
+    <link rel="stylesheet" type="text/css" href="../resources/stage.css">
+    <script src="../../resources/algorithm.js"></script>
+    <script src="../../resources/strings.js"></script>
+    <script src="../../resources/sampler.js"></script>
+    <script src="../../resources/extensions.js"></script>
+    <script src="../resources/math.js"></script>
+    <script src="../resources/utilities.js"></script>    
+    <script src="../resources/main.js"></script>
+    <script src="../resources/stage.js"></script>  
+    <script src="../bouncing-particles/resources/bouncing-particles.js"></script>
+    <script charset="utf-8" src="resources/text-boxes.js"></script>
+</head>
+<body>
+    <div id="sample-text" class="particle">I can eat glass and it doesn't hurt me.
+        Vitrum edere possum; mihi non nocet.
+        Je peux manger du verre, ça ne me fait pas mal.
+        काचं शक्नोम्यत्तुम् । नोपहिनस्ति माम
+        אני יכול לאכול זכוכית וזה לא מזיק לי.
+        ὕαλον ϕαγεῖν δύναμαι· τοῦτο οὔ με βλάπτει.
+        أنا قادر على أكل الزجاج و هذا لا يؤلمني.
+        ฉันกินกระจกได้ แต่มันไม่ทำให้ฉันเจ็บ
+        मैं काँच खा सकता हूँ और मुझे उससे कोई चोट नहीं पहुंचती.
+        我能吞下玻璃而不伤身体。
+        私はガラスを食べられます。それは私を傷つけません。
+        나는 유리를 먹을 수 있어요. 그래도 아프지 않아요
+        Я можу їсти скло, і воно мені не зашкодить.
+        ನನಗೆ ಹಾನಿ ಆಗದೆ, ನಾನು ಗಜನ್ನು ತಿನಬಹುದು 
+    </div>
+    <div id="stage"></div>
+</body>
+</html>
index 7e27253..33e7619 100644 (file)
@@ -1,3 +1,26 @@
+2015-12-23  Simon Fraser  <simon.fraser@apple.com>
+
+        Add an Animometer developer test which animates text-rich boxes
+        https://bugs.webkit.org/show_bug.cgi?id=152544
+
+        Reviewed by Zalan Bujtas.
+        
+        Add a test that draws lots of international text. This is a particle test,
+        moving the boxes around with absolution positioning.
+
+        * Animometer/resources/debug-runner/tests.js:
+        * Animometer/tests/text/resources/text-boxes.js: Added.
+        (BouncingTextBox):
+        (BouncingTextBox.prototype._move):
+        (BouncingTextBox.prototype.animate):
+        (BouncingTextBoxStage):
+        (BouncingTextBoxStage.prototype.createParticle):
+        (BouncingTextBoxStage.prototype.particleWillBeRemoved):
+        (BouncingTextBoxsBenchmark):
+        (BouncingTextBoxsBenchmark.prototype.createStage):
+        (window.benchmarkClient.create):
+        * Animometer/tests/text/text-boxes.html: Added.
+
 2015-12-23  Jon Lee  <jonlee@apple.com>
 
         Split benchmark into two different pages