[freetype2] GSoC-2017-kushal 4acdc51 67/70: Pause|Play Button

[Kushal K S V S]

branch: GSoC-2017-kushal
commit 4acdc515479f9acfa8e2cce7cd48bb368332e2bf
Author: Kushal K S V S <address@hidden>
Commit: Kushal K S V S <address@hidden>

    Pause|Play Button
---
 tests/html/scripts/top.js |  5 +++++
 tests/html/styles/top.css | 11 +++++++----
 tests/runme.sh            |  3 ++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/tests/html/scripts/top.js b/tests/html/scripts/top.js
index 072736c..dc9c977 100644
--- a/tests/html/scripts/top.js
+++ b/tests/html/scripts/top.js
@@ -111,3 +111,8 @@ function topFunction() {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
 }
+// Function to pause/play the animation
+function pause_play() {
+       var div = frame_2.document.getElementById('animation');
+       div.classList.toggle('pause');
+}
\ No newline at end of file
diff --git a/tests/html/styles/top.css b/tests/html/styles/top.css
index a41fbd5..a47d70e 100644
--- a/tests/html/styles/top.css
+++ b/tests/html/styles/top.css
@@ -91,10 +91,6 @@ th {
   height: 130px;
 }
 /*Animations*/
-.animation:active {
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
-}
 /* Transition between 1st and the 2nd sub-image */
 .one_two {
     -webkit-animation: one_two 2s steps(2) infinite;
@@ -119,6 +115,13 @@ th {
          -o-animation: one_four 2s steps(2) infinite;
             animation: one_four 2s steps(2) infinite;
 }
+/* Pause/Play the animation */
+.pause {
+  animation-play-state: paused;
+  -o-animation-play-state: paused;
+  -moz-animation-play-state: paused;
+  -webkit-animation-play-state: paused;
+}
 @-webkit-keyframes one_two {
    from { background-position:      0px; }
      to { background-position:   66.66%; } /* Goes to 2nd sub-image */
diff --git a/tests/runme.sh b/tests/runme.sh
index 9ed209e..fe689d8 100755
--- a/tests/runme.sh
+++ b/tests/runme.sh
@@ -55,7 +55,8 @@ done
 echo '<div id="select_animation">
         <button onclick="class_one_two()">One-Two</button>
         <button onclick="class_one_three()">One-Three</button>
-        <button onclick="class_one_four()">One-Four</button>
+        <button onclick="class_one_four()">One-Four</button>&nbsp&nbsp
+        <button onclick="pause_play()"> Pause|Play </button>
       </div>
       <div class="select">'>>./html/top.html
 #####################################################################