From ad852d3e81af660b0889814d8f4fe34f181c8fd5 Mon Sep 17 00:00:00 2001
From: Sigurdur Gudbrandsson <sigurdur@sigginet.info>
Date: Tue, 24 Jan 2017 12:38:07 +0000
Subject: [PATCH 1/6] Badly formatted youtube URLs cause a parse error

The DOM parser throws away invalid HTML.

When you have http://youtube.com/embed/_FlV6pgwlrk&list=123 then
the `IframeYouTubeTagTransformPass::getYouTubeCode()` will match the
ID as `_FlV6pgwlrk&list=123` but since the ampersand isn't in a
proper HTML format (`&amp;`), then DOM will throw this whole
element away.

I wrote a test to make sure noone breaks this in the future.
---
 src/Pass/IframeYouTubeTagTransformPass.php    |  8 +++---
 .../fragment-html/youtube-bad-fragment.html   |  4 +++
 .../youtube-bad-fragment.html.out             | 27 +++++++++++++++++++
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 tests/test-data/fragment-html/youtube-bad-fragment.html
 create mode 100644 tests/test-data/fragment-html/youtube-bad-fragment.html.out

diff --git a/src/Pass/IframeYouTubeTagTransformPass.php b/src/Pass/IframeYouTubeTagTransformPass.php
index 67017b38..e55b0ffa 100644
--- a/src/Pass/IframeYouTubeTagTransformPass.php
+++ b/src/Pass/IframeYouTubeTagTransformPass.php
@@ -125,25 +125,25 @@ protected function getYouTubeCode(DOMQuery $el)
         if (preg_match('&(*UTF8)/embed/([^/?\&]+)&i', $href, $matches)) {
             if (!empty($matches[1])) {
                 $youtube_code = $matches[1];
-                return $youtube_code;
+                return htmlspecialchars($youtube_code);
             }
         }
 
         if (preg_match('&(*UTF8)youtu\.be/([^/?\&]+)&i', $href, $matches)) {
             if (!empty($matches[1])) {
                 $youtube_code = $matches[1];
-                return $youtube_code;
+                return htmlspecialchars($youtube_code);
             }
         }
 
         if (preg_match('!(*UTF8)watch\?v=([^&]+)!i', $href, $matches)) {
             if (!empty($matches[1])) {
                 $youtube_code = $matches[1];
-                return $youtube_code;
+                return htmlspecialchars($youtube_code);
             }
         }
 
-        return $youtube_code;
+        return htmlspecialchars($youtube_code);
     }
 
     /**
diff --git a/tests/test-data/fragment-html/youtube-bad-fragment.html b/tests/test-data/fragment-html/youtube-bad-fragment.html
new file mode 100644
index 00000000..ff4f5921
--- /dev/null
+++ b/tests/test-data/fragment-html/youtube-bad-fragment.html
@@ -0,0 +1,4 @@
+<iframe data-priority="high" width="560" height="315"
+        src="https://www.youtube.com/embed/MnR9AVs6Q_c&amp;list=PLiGedaJzwg4zAaznvmnz66U6K1-LFpBYk"
+        frameborder="0" allowfullscreen>
+</iframe>
diff --git a/tests/test-data/fragment-html/youtube-bad-fragment.html.out b/tests/test-data/fragment-html/youtube-bad-fragment.html.out
new file mode 100644
index 00000000..4bd97cc4
--- /dev/null
+++ b/tests/test-data/fragment-html/youtube-bad-fragment.html.out
@@ -0,0 +1,27 @@
+<amp-youtube data-videoid="MnR9AVs6Q_c&amp;list=PLiGedaJzwg4zAaznvmnz66U6K1-LFpBYk" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
+
+
+ORIGINAL HTML
+---------------
+Line 1: <iframe data-priority="high" width="560" height="315"
+Line 2:         src="https://www.youtube.com/embed/MnR9AVs6Q_c&amp;list=PLiGedaJzwg4zAaznvmnz66U6K1-LFpBYk"
+Line 3:         frameborder="0" allowfullscreen>
+Line 4: </iframe>
+Line 5: 
+
+
+Transformations made from HTML tags to AMP custom tags
+-------------------------------------------------------
+
+<iframe data-priority="high" width="560" height="315" src="https://www.youtube.com/embed/MnR9AVs6Q_c&list=PLiGedaJzwg4zAaznvmnz66U6K1-LFpBYk" frameborder allowfullscreen> at line 3
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
+
+AMP-HTML Validation Issues and Fixes
+-------------------------------------
+PASS
+
+COMPONENT NAMES WITH JS PATH
+------------------------------
+'amp-youtube', include path 'https://cdn.ampproject.org/v0/amp-youtube-0.1.js'
+

From 9bfcb27a339d68444b4b5dc786326e48b8418daf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Gerbore?= <a.gerbore@gmail.com>
Date: Thu, 26 Jan 2017 14:23:24 +0000
Subject: [PATCH 2/6] fix-image-height-missing

---
 composer.json                                          | 10 +++++++---
 tests/test-data/full-html/mandatory_dimensions.html    |  2 +-
 .../test-data/full-html/mandatory_dimensions.html.out  |  4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/composer.json b/composer.json
index b6135efc..046933d1 100644
--- a/composer.json
+++ b/composer.json
@@ -1,15 +1,19 @@
 {
-    "name": "lullabot/amp",
+    "name": "GuideToIceland/amp",
     "description": "A set of useful classes and utilities to convert html to AMP html (See https://www.ampproject.org/)",
     "authors": [
         {
             "name": "Sidharth Kshatriya",
             "email": "sid.kshatriya@gmail.com"
+        },
+        {
+            "name": "Aurelien Gerbore",
+            "email": "agerbore@gmail.com"
         }
     ],
     "license": "Apache-2.0",
-    "keywords": ["Drupal", "AMP", "mobile"],
-    "homepage": "https://github.com/Lullabot/amp-library",
+    "keywords": ["AMP", "mobile"],
+    "homepage": "https://github.com/GuideToIceland/amp-library",
     "require" : {
         "php" : ">=5.5.0",
         "querypath/QueryPath": ">=3.0.4",
diff --git a/tests/test-data/full-html/mandatory_dimensions.html b/tests/test-data/full-html/mandatory_dimensions.html
index 7558b425..ae0ffbe1 100644
--- a/tests/test-data/full-html/mandatory_dimensions.html
+++ b/tests/test-data/full-html/mandatory_dimensions.html
@@ -111,7 +111,7 @@
     <amp-img src="img" layout="container" width="42" height="42"></amp-img>
     <amp-img src="img"></amp-img>
 
-    <!-- Layout of responsive/fixed without width/height -->
+    <!-- Layout of responsive/fixed without width/height - This should all fail -->
     <amp-img src="img" layout="responsive"></amp-img>
     <amp-img src="img" layout="fixed"></amp-img>
     <amp-img src="img" layout="responsive" width="42"></amp-img>
diff --git a/tests/test-data/full-html/mandatory_dimensions.html.out b/tests/test-data/full-html/mandatory_dimensions.html.out
index 206b6895..b90b2ecc 100644
--- a/tests/test-data/full-html/mandatory_dimensions.html.out
+++ b/tests/test-data/full-html/mandatory_dimensions.html.out
@@ -118,7 +118,7 @@
     <amp-img src="img" width="42" height="42" layout="responsive"></amp-img>
     <amp-img src="img" layout="responsive"></amp-img>
 
-    <!-- Layout of responsive/fixed without width/height -->
+    <!-- Layout of responsive/fixed without width/height - This should all fail -->
     <amp-img src="img" layout="responsive"></amp-img>
     <amp-img src="img" layout="fixed"></amp-img>
     <amp-img src="img" layout="responsive" width="42"></amp-img>
@@ -273,7 +273,7 @@ Line 110:     <amp-img src="img" layout="container"></amp-img>
 Line 111:     <amp-img src="img" layout="container" width="42" height="42"></amp-img>
 Line 112:     <amp-img src="img"></amp-img>
 Line 113: 
-Line 114:     <!-- Layout of responsive/fixed without width/height -->
+Line 114:     <!-- Layout of responsive/fixed without width/height - This should all fail -->
 Line 115:     <amp-img src="img" layout="responsive"></amp-img>
 Line 116:     <amp-img src="img" layout="fixed"></amp-img>
 Line 117:     <amp-img src="img" layout="responsive" width="42"></amp-img>

From 514a7433fbbbf6a06ae10ddc444dbddd8f242fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Gerbore?= <a.gerbore@gmail.com>
Date: Fri, 27 Jan 2017 13:22:32 +0000
Subject: [PATCH 3/6] youtube-start-time : Fix
 IframeYotubeTransformPass::getYouTubeCode()

---
 src/Pass/IframeYouTubeTagTransformPass.php    | 24 ++-----
 .../youtube-bad-fragment.html.out             |  2 +-
 .../fragment-html/youtube-fragment.html       | 32 ++++++++-
 .../fragment-html/youtube-fragment.html.out   | 70 +++++++++++++++++--
 4 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/src/Pass/IframeYouTubeTagTransformPass.php b/src/Pass/IframeYouTubeTagTransformPass.php
index e55b0ffa..46b8bcf5 100644
--- a/src/Pass/IframeYouTubeTagTransformPass.php
+++ b/src/Pass/IframeYouTubeTagTransformPass.php
@@ -113,6 +113,7 @@ protected function isYouTubeIframe(DOMQuery $el)
      *
      * @param DOMQuery $el
      * @return string
+     *
      */
     protected function getYouTubeCode(DOMQuery $el)
     {
@@ -120,24 +121,11 @@ protected function getYouTubeCode(DOMQuery $el)
         $youtube_code = '';
         $href = $el->attr('src');
 
-        // @todo there seem to be a lot of ways to embed a youtube video. We probably need to capture all patterns here
-        // The next one is the embed code that youtube gives you
-        if (preg_match('&(*UTF8)/embed/([^/?\&]+)&i', $href, $matches)) {
-            if (!empty($matches[1])) {
-                $youtube_code = $matches[1];
-                return htmlspecialchars($youtube_code);
-            }
-        }
-
-        if (preg_match('&(*UTF8)youtu\.be/([^/?\&]+)&i', $href, $matches)) {
-            if (!empty($matches[1])) {
-                $youtube_code = $matches[1];
-                return htmlspecialchars($youtube_code);
-            }
-        }
-
-        if (preg_match('!(*UTF8)watch\?v=([^&]+)!i', $href, $matches)) {
-            if (!empty($matches[1])) {
+        // This regex is supposed to catch all possible way to embed youtube video
+        if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $href, $matches))
+        {
+            if (!empty($matches[1]))
+            {
                 $youtube_code = $matches[1];
                 return htmlspecialchars($youtube_code);
             }
diff --git a/tests/test-data/fragment-html/youtube-bad-fragment.html.out b/tests/test-data/fragment-html/youtube-bad-fragment.html.out
index 4bd97cc4..259906ea 100644
--- a/tests/test-data/fragment-html/youtube-bad-fragment.html.out
+++ b/tests/test-data/fragment-html/youtube-bad-fragment.html.out
@@ -1,4 +1,4 @@
-<amp-youtube data-videoid="MnR9AVs6Q_c&amp;list=PLiGedaJzwg4zAaznvmnz66U6K1-LFpBYk" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
+<amp-youtube data-videoid="MnR9AVs6Q_c" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
 
 
 ORIGINAL HTML
diff --git a/tests/test-data/fragment-html/youtube-fragment.html b/tests/test-data/fragment-html/youtube-fragment.html
index eab435e2..f1207f1e 100644
--- a/tests/test-data/fragment-html/youtube-fragment.html
+++ b/tests/test-data/fragment-html/youtube-fragment.html
@@ -1,4 +1,34 @@
 <iframe data-priority="high" width="560" height="315"
         src="https://www.youtube.com/embed/MnR9AVs6Q_c?autoplay=1&controls=0"
         frameborder="0" allowfullscreen>
-</iframe>
\ No newline at end of file
+</iframe>
+
+<iframe data-priority="high" width="560" height="315"
+        src="https://www.youtube.com/embed/MnR9AVs6Q_c#t=15"
+        frameborder="0" allowfullscreen>
+</iframe>
+
+<iframe data-priority="high" width="560" height="315"
+        src="https://www.youtube.com/embed/MnR9AVs6Q_c?&t=15"
+        frameborder="0" allowfullscreen>
+</iframe>
+
+<iframe data-priority="high" width="560" height="315"
+        src="http://youtu.be/dQw4w9WgXcQ"
+        frameborder="0" allowfullscreen>
+</iframe>
+
+<iframe data-priority="high" width="560" height="315"
+        src="http://www.youtube.com/watch?v=dQw4w9WgXcQ#t=15"
+        frameborder="0" allowfullscreen>
+</iframe>
+
+<iframe data-priority="high" width="560" height="315"
+        src="http://www.youtube.com/user/username#p/u/11/dQw4w9WgXcQ"
+        frameborder="0" allowfullscreen>
+</iframe>
+
+<iframe data-priority="high" width="560" height="315"
+        src="https://www.youtube.com/embed/MnR9AVs6Q_c&amp;t=15"
+        frameborder="0" allowfullscreen>
+</iframe>
diff --git a/tests/test-data/fragment-html/youtube-fragment.html.out b/tests/test-data/fragment-html/youtube-fragment.html.out
index d711b65a..21365f43 100644
--- a/tests/test-data/fragment-html/youtube-fragment.html.out
+++ b/tests/test-data/fragment-html/youtube-fragment.html.out
@@ -1,11 +1,55 @@
 <amp-youtube data-videoid="MnR9AVs6Q_c" layout="responsive" data-priority="high" height="315" width="560" data-param-autoplay="1" data-param-controls="0"></amp-youtube>
 
+<amp-youtube data-videoid="MnR9AVs6Q_c" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
+
+<amp-youtube data-videoid="MnR9AVs6Q_c" layout="responsive" data-priority="high" height="315" width="560" data-param-t="15"></amp-youtube>
+
+<amp-youtube data-videoid="dQw4w9WgXcQ" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
+
+<amp-youtube data-videoid="dQw4w9WgXcQ" layout="responsive" data-priority="high" height="315" width="560" data-param-v="dQw4w9WgXcQ"></amp-youtube>
+
+<amp-youtube data-videoid="dQw4w9WgXcQ" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
+
+<amp-youtube data-videoid="MnR9AVs6Q_c" layout="responsive" data-priority="high" height="315" width="560"></amp-youtube>
+
+
 ORIGINAL HTML
 ---------------
-Line 1: <iframe data-priority="high" width="560" height="315"
-Line 2:         src="https://www.youtube.com/embed/MnR9AVs6Q_c?autoplay=1&controls=0"
-Line 3:         frameborder="0" allowfullscreen>
-Line 4: </iframe>
+Line  1: <iframe data-priority="high" width="560" height="315"
+Line  2:         src="https://www.youtube.com/embed/MnR9AVs6Q_c?autoplay=1&controls=0"
+Line  3:         frameborder="0" allowfullscreen>
+Line  4: </iframe>
+Line  5: 
+Line  6: <iframe data-priority="high" width="560" height="315"
+Line  7:         src="https://www.youtube.com/embed/MnR9AVs6Q_c#t=15"
+Line  8:         frameborder="0" allowfullscreen>
+Line  9: </iframe>
+Line 10: 
+Line 11: <iframe data-priority="high" width="560" height="315"
+Line 12:         src="https://www.youtube.com/embed/MnR9AVs6Q_c?&t=15"
+Line 13:         frameborder="0" allowfullscreen>
+Line 14: </iframe>
+Line 15: 
+Line 16: <iframe data-priority="high" width="560" height="315"
+Line 17:         src="http://youtu.be/dQw4w9WgXcQ"
+Line 18:         frameborder="0" allowfullscreen>
+Line 19: </iframe>
+Line 20: 
+Line 21: <iframe data-priority="high" width="560" height="315"
+Line 22:         src="http://www.youtube.com/watch?v=dQw4w9WgXcQ#t=15"
+Line 23:         frameborder="0" allowfullscreen>
+Line 24: </iframe>
+Line 25: 
+Line 26: <iframe data-priority="high" width="560" height="315"
+Line 27:         src="http://www.youtube.com/user/username#p/u/11/dQw4w9WgXcQ"
+Line 28:         frameborder="0" allowfullscreen>
+Line 29: </iframe>
+Line 30: 
+Line 31: <iframe data-priority="high" width="560" height="315"
+Line 32:         src="https://www.youtube.com/embed/MnR9AVs6Q_c&amp;t=15"
+Line 33:         frameborder="0" allowfullscreen>
+Line 34: </iframe>
+Line 35: 
 
 
 Transformations made from HTML tags to AMP custom tags
@@ -14,6 +58,24 @@ Transformations made from HTML tags to AMP custom tags
 <iframe data-priority="high" width="560" height="315" src="https://www.youtube.com/embed/MnR9AVs6Q_c?autoplay=1&controls=0" frameborder allowfullscreen> at line 3
  ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
 
+<iframe data-priority="high" width="560" height="315" src="https://www.youtube.com/embed/MnR9AVs6Q_c#t=15" frameborder allowfullscreen> at line 8
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
+<iframe data-priority="high" width="560" height="315" src="https://www.youtube.com/embed/MnR9AVs6Q_c?&t=15" frameborder allowfullscreen> at line 13
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
+<iframe data-priority="high" width="560" height="315" src="http://youtu.be/dQw4w9WgXcQ" frameborder allowfullscreen> at line 18
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
+<iframe data-priority="high" width="560" height="315" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ#t=15" frameborder allowfullscreen> at line 23
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
+<iframe data-priority="high" width="560" height="315" src="http://www.youtube.com/user/username#p/u/11/dQw4w9WgXcQ" frameborder allowfullscreen> at line 28
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
+<iframe data-priority="high" width="560" height="315" src="https://www.youtube.com/embed/MnR9AVs6Q_c&t=15" frameborder allowfullscreen> at line 33
+ ACTION TAKEN: iframe tag was converted to the amp-youtube tag.
+
 
 AMP-HTML Validation Issues and Fixes
 -------------------------------------

From 30fbd970477ecd7e6c8d9a761930034c57fc9948 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Gerbore?= <a.gerbore@gmail.com>
Date: Wed, 1 Feb 2017 16:58:49 +0000
Subject: [PATCH 4/6] Add amp-anim for animated image + remove non-converted
 img tag in AmpImgFixPass

---
 composer.json                                 |  10 +-
 src/AMP.php                                   |  11 ++
 src/Pass/AmpImgFixPass.php                    |  11 ++
 src/Pass/ImgTagTransformPass.php              | 104 +++++++++++++++++-
 src/Utility/ActionTakenType.php               |   1 +
 .../fragment-html/img-anim-test-fragment.html |  14 +++
 .../img-anim-test-fragment.html.options.json  |   4 +
 .../img-anim-test-fragment.html.out           |  67 +++++++++++
 .../fragment-html/img-test-fragment.html      |   7 +-
 .../fragment-html/img-test-fragment.html.out  |  15 ++-
 10 files changed, 231 insertions(+), 13 deletions(-)
 create mode 100644 tests/test-data/fragment-html/img-anim-test-fragment.html
 create mode 100644 tests/test-data/fragment-html/img-anim-test-fragment.html.options.json
 create mode 100644 tests/test-data/fragment-html/img-anim-test-fragment.html.out

diff --git a/composer.json b/composer.json
index 046933d1..b6135efc 100644
--- a/composer.json
+++ b/composer.json
@@ -1,19 +1,15 @@
 {
-    "name": "GuideToIceland/amp",
+    "name": "lullabot/amp",
     "description": "A set of useful classes and utilities to convert html to AMP html (See https://www.ampproject.org/)",
     "authors": [
         {
             "name": "Sidharth Kshatriya",
             "email": "sid.kshatriya@gmail.com"
-        },
-        {
-            "name": "Aurelien Gerbore",
-            "email": "agerbore@gmail.com"
         }
     ],
     "license": "Apache-2.0",
-    "keywords": ["AMP", "mobile"],
-    "homepage": "https://github.com/GuideToIceland/amp-library",
+    "keywords": ["Drupal", "AMP", "mobile"],
+    "homepage": "https://github.com/Lullabot/amp-library",
     "require" : {
         "php" : ">=5.5.0",
         "querypath/QueryPath": ">=3.0.4",
diff --git a/src/AMP.php b/src/AMP.php
index 9836e62a..b1eb5f6c 100644
--- a/src/AMP.php
+++ b/src/AMP.php
@@ -174,6 +174,17 @@ public function loadHtml($html, $options = [])
             $options['use_html5_parser'] = true;
         }
 
+        // By default the convertion of img into amp-anim is disabled (because of ressource cost)
+        //  => they will be converted into amp-img instead
+        if (!isset($options['use_img_anim_tag'])) {
+            $options['use_img_anim_tag'] = false;
+        }
+
+        // By default img that can't be converted are kept as it is and not removed
+        if (!isset($options['remove_non_converted_img_tag'])) {
+            $options['remove_non_converted_img_tag'] = false;
+        }
+
         $this->options = $options;
         $this->scope = !empty($options['scope']) ? $options['scope'] : Scope::BODY_SCOPE;
 
diff --git a/src/Pass/AmpImgFixPass.php b/src/Pass/AmpImgFixPass.php
index ec9d6b55..ea4c68f4 100644
--- a/src/Pass/AmpImgFixPass.php
+++ b/src/Pass/AmpImgFixPass.php
@@ -75,6 +75,17 @@ function pass()
                     $error->resolved = false;
                 }
             }
+            elseif (in_array($error->code, [ValidationErrorCode::MANDATORY_TAG_ANCESTOR_WITH_HINT]) &&
+                !$error->resolved &&
+                !empty($error->dom_tag) &&
+                strtolower($error->dom_tag->tagName) == 'img' &&
+                !empty($this->options['remove_non_converted_img_tag'])
+            ) {
+                 // Remove the offending tag
+                $error->dom_tag->parentNode->removeChild($error->dom_tag);
+                $error->addActionTaken(new ActionTakenLine('img', ActionTakenType::TAG_REMOVED));
+                $error->resolved = TRUE;
+            }
         }
     }
 }
diff --git a/src/Pass/ImgTagTransformPass.php b/src/Pass/ImgTagTransformPass.php
index d8ed2488..8e28efeb 100644
--- a/src/Pass/ImgTagTransformPass.php
+++ b/src/Pass/ImgTagTransformPass.php
@@ -79,8 +79,9 @@ function pass()
             }
             if ($this->isPixel($el)) {
                 $new_dom_el = $this->convertAmpPixel($el, $lineno, $context_string);
-            }
-            else {
+            } else if (!empty($this->options['use_amp_anim_tag']) && $this->isAnimatedImg($dom_el)) {
+                $new_dom_el = $this->convertAmpAnim($el, $lineno, $context_string);
+            } else {
                 $new_dom_el = $this->convertAmpImg($el, $lineno, $context_string);
             }
             $this->context->addLineAssociation($new_dom_el, $lineno);
@@ -139,6 +140,24 @@ protected function getLayout($el) {
             ? 'fixed' : 'responsive';
     }
 
+    /**
+     * Given an animated image element returns an amp-anim element with the same attributes and children
+     *
+     * @param DOMQuery $el
+     * @param int $lineno
+     * @param string $context_string
+     * @return DOMElement
+     */
+    protected function convertAmpAnim($el, $lineno, $context_string)
+    {
+        $dom_el = $el->get(0);
+        $new_dom_el = $this->cloneAndRenameDomElement($dom_el, 'amp-anim');
+        $new_el = $el->prev();
+        $this->setLayoutIfNoLayout($new_el, 'responsive');
+        $this->addActionTaken(new ActionTakenLine('img', ActionTakenType::IMG_ANIM_CONVERTED, $lineno, $context_string));
+        return $new_dom_el;
+    }
+
     /**
      * Given an image src attribute, try to get its dimensions
      * Returns false on failure
@@ -188,6 +207,87 @@ protected function isPixel(DOMQuery $el)
         return $el->attr('width') === '1' && $el->attr('height') === '1';
     }
 
+    /**
+     * Detects if the img is animated. In that case we convert to <amp-anim> instead of <amp-img>
+     * @param \DOMElement $el
+     * @return bool
+     */
+    protected function isAnimatedImg(\DOMElement $el)
+    {
+        $animated_type = ['gif', 'png'];
+        if (!$el->hasAttribute('src')) {
+            return true;
+        }
+
+        $src = trim($el->getAttribute('src'));
+        if (preg_match('/\.([a-z0-9]+)$/i', parse_url($src,PHP_URL_PATH), $match)) {
+            if (!empty($match[1]) && in_array(strtolower($match[1]), $animated_type)) {
+                if ($match[1] === "gif") {
+                    if ($this->isAnimatedGif($src)) {
+                        return true;
+                    } else {
+                        return false;
+                    }
+                }
+                if ($this->isApng($src)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Identifies APNGs
+     * Written by Coda, functionified by Foone/Popcorn Mariachi#!9i78bPeIxI
+     * This code is in the public domain
+     *
+     * @see http://stackoverflow.com/a/4525194
+     * @see http://foone.org/apng/identify_apng.php
+     *
+     * @param  string  $src    The filename
+     * @return bool    true if the file is an APMG
+     */
+    function isApng($src)
+    {
+        $img_bytes = @file_get_contents($src);
+        if ($img_bytes) {
+            if (strpos(substr($img_bytes, 0, strpos($img_bytes, 'IDAT')), 'acTL') !== false) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Detects if the gif image is animated or not
+     * source: http://php.net/manual/en/function.imagecreatefromgif.php#104473
+     *
+     * @param  string  $filename
+     * @return bool
+     */
+    function isAnimatedGif($filename) {
+        if (!($fh = @fopen($filename, 'rb')))
+            return FALSE;
+        $count = 0;
+        //an animated gif contains multiple "frames", with each frame having a
+        //header made up of:
+        // * a static 4-byte sequence (\x00\x21\xF9\x04)
+        // * 4 variable bytes
+        // * a static 2-byte sequence (\x00\x2C) (some variants may use \x00\x21 ?)
+
+        // We read through the file til we reach the end of the file, or we've found
+        // at least 2 frame headers
+        while (!feof($fh) && $count < 2) {
+            $chunk = fread($fh, 1024 * 100); //read 100kb at a time
+            $count += preg_match_all('#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s', $chunk, $matches);
+       }
+
+        fclose($fh);
+        return $count > 1;
+    }
+
     /**
      * @param string $src
      * @return boolean|string
diff --git a/src/Utility/ActionTakenType.php b/src/Utility/ActionTakenType.php
index 0a9a8817..52462b5c 100644
--- a/src/Utility/ActionTakenType.php
+++ b/src/Utility/ActionTakenType.php
@@ -25,6 +25,7 @@ class ActionTakenType
     const PROPERTY_REMOVED_ATTRIBUTE_REMOVED = 'property value pair was removed from attribute due to validation issues. The resulting attribute was empty and was also removed.';
     const IMG_CONVERTED = 'tag was converted to the amp-img tag.';
     const IMG_PIXEL_CONVERTED = 'tag was converted to the amp-pixel tag.';
+    const IMG_ANIM_CONVERTED = 'tag was converted to the amp-anim tag.';
     const IMG_COULD_NOT_BE_CONVERTED = 'tag could NOT be converted to the amp-img tag as the image is not accessible.';
     const INSTAGRAM_CONVERTED = 'instagram embed code was converted to the amp-instagram tag.';
     const PINTEREST_CONVERTED = 'pinterest embed code was converted to the amp-pinterest tag.';
diff --git a/tests/test-data/fragment-html/img-anim-test-fragment.html b/tests/test-data/fragment-html/img-anim-test-fragment.html
new file mode 100644
index 00000000..26cbce10
--- /dev/null
+++ b/tests/test-data/fragment-html/img-anim-test-fragment.html
@@ -0,0 +1,14 @@
+<!-- should transform to amp-anim-->
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif">
+
+<!-- should transform to amp-img because this gif is not animated -->
+<img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif">
+
+<!-- should transform to amp-anim-->
+<img src="https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png">
+
+<!-- should transform to amp-img because this png is not animated -->
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikimedia-logo.png/240px-Wikimedia-logo.png">
+
+<!-- nonexistent image, should refuse to convert to amp-img and delete it -->
+<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg">
diff --git a/tests/test-data/fragment-html/img-anim-test-fragment.html.options.json b/tests/test-data/fragment-html/img-anim-test-fragment.html.options.json
new file mode 100644
index 00000000..e4ef92a8
--- /dev/null
+++ b/tests/test-data/fragment-html/img-anim-test-fragment.html.options.json
@@ -0,0 +1,4 @@
+{
+  "use_amp_anim_tag" : true,
+  "remove_non_converted_img_tag" : true
+}
diff --git a/tests/test-data/fragment-html/img-anim-test-fragment.html.out b/tests/test-data/fragment-html/img-anim-test-fragment.html.out
new file mode 100644
index 00000000..772f89d5
--- /dev/null
+++ b/tests/test-data/fragment-html/img-anim-test-fragment.html.out
@@ -0,0 +1,67 @@
+<!-- should transform to amp-anim-->
+<amp-anim src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif" width="200" height="200" layout="responsive"></amp-anim>
+
+<!-- should transform to amp-img because this gif is not animated -->
+<amp-img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif" width="46" height="46" layout="responsive"></amp-img>
+
+<!-- should transform to amp-anim-->
+<amp-anim src="https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png" width="100" height="100" layout="responsive"></amp-anim>
+
+<!-- should transform to amp-img because this png is not animated -->
+<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikimedia-logo.png/240px-Wikimedia-logo.png" width="240" height="240" layout="responsive"></amp-img>
+
+<!-- nonexistent image, should refuse to convert to amp-img and delete it -->
+
+
+
+ORIGINAL HTML
+---------------
+Line  1: <!-- should transform to amp-anim-->
+Line  2: <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif">
+Line  3: 
+Line  4: <!-- should transform to amp-img because this gif is not animated -->
+Line  5: <img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif">
+Line  6: 
+Line  7: <!-- should transform to amp-anim-->
+Line  8: <img src="https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png">
+Line  9: 
+Line 10: <!-- should transform to amp-img because this png is not animated -->
+Line 11: <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikimedia-logo.png/240px-Wikimedia-logo.png">
+Line 12: 
+Line 13: <!-- nonexistent image, should refuse to convert to amp-img and delete it -->
+Line 14: <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg">
+Line 15: 
+
+
+Transformations made from HTML tags to AMP custom tags
+-------------------------------------------------------
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif"> at line 2
+ ACTION TAKEN: img tag was converted to the amp-anim tag.
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif"> at line 5
+ ACTION TAKEN: img tag was converted to the amp-img tag.
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png"> at line 8
+ ACTION TAKEN: img tag was converted to the amp-anim tag.
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikimedia-logo.png/240px-Wikimedia-logo.png"> at line 11
+ ACTION TAKEN: img tag was converted to the amp-img tag.
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg"> at line 14
+ ACTION TAKEN: img tag could NOT be converted to the amp-img tag as the image is not accessible.
+
+
+AMP-HTML Validation Issues and Fixes
+-------------------------------------
+FAIL
+
+<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg"> on line 14
+- The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
+   [code: MANDATORY_TAG_ANCESTOR_WITH_HINT  category: DISALLOWED_HTML_WITH_AMP_EQUIVALENT see: https://www.ampproject.org/docs/reference/amp-img.html]
+   ACTION TAKEN: img tag was removed due to validation issues.
+
+COMPONENT NAMES WITH JS PATH
+------------------------------
+'amp-anim', include path 'https://cdn.ampproject.org/v0/amp-anim-0.1.js'
+
diff --git a/tests/test-data/fragment-html/img-test-fragment.html b/tests/test-data/fragment-html/img-test-fragment.html
index 348842c8..69554435 100644
--- a/tests/test-data/fragment-html/img-test-fragment.html
+++ b/tests/test-data/fragment-html/img-test-fragment.html
@@ -6,7 +6,7 @@
 <!-- should transform to amp-img with fixed layout, preserving the width and height -->
 <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/%22Birdcatcher%22_with_jockey_up.jpg" width="125" height="96">
 
-<!-- nonexistent image, should refuse to convert to amp-img -->
+<!-- nonexistent image, should refuse to convert to amp-img and keep it as it is -->
 <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg">
 
 <!-- should provide layout and height width and make layout responsive -->
@@ -22,4 +22,7 @@
 <amp-img layout="responsive" src="https://upload.wikimedia.org/wikipedia/commons/e/ee/%22Birdcatcher%22_with_jockey_up.jpg" width="625rem" height="480"></amp-img>
 
 <!-- should transform to amp-pixel -->
-<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif">
\ No newline at end of file
+<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif">
+
+<!-- should transform to amp-img instead of amp-anim because of default option['use_amp_anim_tag'] = false -->
+<img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif">
diff --git a/tests/test-data/fragment-html/img-test-fragment.html.out b/tests/test-data/fragment-html/img-test-fragment.html.out
index 62092be5..1b602430 100644
--- a/tests/test-data/fragment-html/img-test-fragment.html.out
+++ b/tests/test-data/fragment-html/img-test-fragment.html.out
@@ -6,7 +6,7 @@
 <!-- should transform to amp-img with fixed layout, preserving the width and height -->
 <amp-img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/%22Birdcatcher%22_with_jockey_up.jpg" width="125" height="96" layout="fixed"></amp-img>
 
-<!-- nonexistent image, should refuse to convert to amp-img -->
+<!-- nonexistent image, should refuse to convert to amp-img and keep it as it is -->
 <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg">
 
 <!-- should provide layout and height width and make layout responsive -->
@@ -24,6 +24,10 @@
 <!-- should transform to amp-pixel -->
 <amp-pixel src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif"></amp-pixel>
 
+<!-- should transform to amp-img instead of amp-anim because of default option['use_amp_anim_tag'] = false -->
+<amp-img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif" width="46" height="46" layout="responsive"></amp-img>
+
+
 ORIGINAL HTML
 ---------------
 Line  1: <!-- Note: this image is in the public domain. https://commons.wikimedia.org/wiki/File:"Birdcatcher"_with_jockey_up.jpg -->
@@ -34,7 +38,7 @@ Line  5:
 Line  6: <!-- should transform to amp-img with fixed layout, preserving the width and height -->
 Line  7: <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/%22Birdcatcher%22_with_jockey_up.jpg" width="125" height="96">
 Line  8: 
-Line  9: <!-- nonexistent image, should refuse to convert to amp-img -->
+Line  9: <!-- nonexistent image, should refuse to convert to amp-img and keep it as it is -->
 Line 10: <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/non-existent-image1234.jpg">
 Line 11: 
 Line 12: <!-- should provide layout and height width and make layout responsive -->
@@ -51,6 +55,10 @@ Line 22: <amp-img layout="responsive" src="https://upload.wikimedia.org/wikipedi
 Line 23: 
 Line 24: <!-- should transform to amp-pixel -->
 Line 25: <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif">
+Line 26: 
+Line 27: <!-- should transform to amp-img instead of amp-anim because of default option['use_amp_anim_tag'] = false -->
+Line 28: <img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif">
+Line 29: 
 
 
 Transformations made from HTML tags to AMP custom tags
@@ -68,6 +76,9 @@ Transformations made from HTML tags to AMP custom tags
 <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif"> at line 25
  ACTION TAKEN: img tag was converted to the amp-pixel tag.
 
+<img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif"> at line 28
+ ACTION TAKEN: img tag was converted to the amp-img tag.
+
 
 AMP-HTML Validation Issues and Fixes
 -------------------------------------

From 211b8f4ceedd637868a3b5c954bc127e56fb6065 Mon Sep 17 00:00:00 2001
From: Sigurdur Gudbrandsson <sigurdur@sigginet.info>
Date: Thu, 9 Feb 2017 13:15:17 +0000
Subject: [PATCH 5/6] Fixing builds to pass testing

---
 tests/test-data/fragment-html/img-test-fragment.html.out | 2 +-
 tests/test-data/full-html/validator-amp-sidebar.html.out | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/test-data/fragment-html/img-test-fragment.html.out b/tests/test-data/fragment-html/img-test-fragment.html.out
index 1b602430..20a30bb1 100644
--- a/tests/test-data/fragment-html/img-test-fragment.html.out
+++ b/tests/test-data/fragment-html/img-test-fragment.html.out
@@ -25,7 +25,7 @@
 <amp-pixel src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif"></amp-pixel>
 
 <!-- should transform to amp-img instead of amp-anim because of default option['use_amp_anim_tag'] = false -->
-<amp-img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif" width="46" height="46" layout="responsive"></amp-img>
+<amp-img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Quilt_design_as_46x46_uncompressed_GIF.gif" width="46" height="46" layout="fixed"></amp-img>
 
 
 ORIGINAL HTML
diff --git a/tests/test-data/full-html/validator-amp-sidebar.html.out b/tests/test-data/full-html/validator-amp-sidebar.html.out
index 369c0d47..a103d11a 100644
--- a/tests/test-data/full-html/validator-amp-sidebar.html.out
+++ b/tests/test-data/full-html/validator-amp-sidebar.html.out
@@ -136,5 +136,6 @@ FAIL
 
 COMPONENT NAMES WITH JS PATH
 ------------------------------
+'amp-sidebar', include path 'https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'
 'amp-fit-text', include path 'https://cdn.ampproject.org/v0/amp-fit-text-0.1.js'
 

From 0e890468107d4c88bc74cf1413d7ba0c684b99b8 Mon Sep 17 00:00:00 2001
From: Sigurdur Gudbrandsson <sigurdur@sigginet.info>
Date: Thu, 9 Feb 2017 14:02:20 +0000
Subject: [PATCH 6/6] Allow Travis builds to fail on PHP nightly

---
 .travis.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index db4454d8..ed294142 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,3 +12,7 @@ before_script:
 
 script:
   - vendor/bin/phpunit tests
+
+matrix:
+  allow_failures:
+    - php: nightly