From 2c60f47818283f99e6af2cf62ada78bdb04e484b Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Wed, 18 Dec 2019 22:15:01 -0800 Subject: [PATCH 01/13] Added visual diff tests and better manual tests --- .../amp-next-page.load-fixed-article.html | 304 ++++++++++++++++++ .../amp-next-page.load-short-article.html | 304 ++++++++++++++++++ .../amp-next-page.scroll-too-fast.html | 298 +++++++++++++++++ .../articles/article-long.html | 134 ++++++++ .../articles/article-short.html | 63 ++++ .../articles/article-with-fixed.html | 158 +++++++++ examples/visual-tests/iframe-wrapper.html | 21 ++ extensions/amp-next-page/0.2/amp-next-page.js | 13 +- extensions/amp-next-page/0.2/service.js | 42 ++- .../amp-next-page/0.2/amp-next-page.amp.html | 21 +- .../0.2/articles/article-long.html | 134 ++++++++ .../0.2/articles/article-short.html | 61 ++++ .../0.2/articles/article-with-fixed.html | 158 +++++++++ test/visual-diff/visual-tests | 21 ++ 14 files changed, 1694 insertions(+), 38 deletions(-) create mode 100644 examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html create mode 100644 examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html create mode 100644 examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html create mode 100644 examples/visual-tests/amp-next-page-v2/articles/article-long.html create mode 100644 examples/visual-tests/amp-next-page-v2/articles/article-short.html create mode 100644 examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html create mode 100644 examples/visual-tests/iframe-wrapper.html create mode 100644 test/manual/amp-next-page/0.2/articles/article-long.html create mode 100644 test/manual/amp-next-page/0.2/articles/article-short.html create mode 100644 test/manual/amp-next-page/0.2/articles/article-with-fixed.html diff --git a/examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html b/examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html new file mode 100644 index 000000000000..071ad8edc65d --- /dev/null +++ b/examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html @@ -0,0 +1,304 @@ + + + + + AMP next page examples + + + + + + + + + + +
+

Host page

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + +
+ Read more +
+
+ Here are a few more articles ... +
+ + + diff --git a/examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html b/examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html new file mode 100644 index 000000000000..45812f571562 --- /dev/null +++ b/examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html @@ -0,0 +1,304 @@ + + + + + AMP next page examples + + + + + + + + + + +
+

Host page

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + +
+ Read more +
+
+ Here are a few more articles ... +
+ + + diff --git a/examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html b/examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html new file mode 100644 index 000000000000..43cb95e3580a --- /dev/null +++ b/examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html @@ -0,0 +1,298 @@ + + + + + AMP next page examples + + + + + + + + + + +
+

Host page

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + +
+ Read more +
+
+ Here are a few more articles ... +
+ + + diff --git a/examples/visual-tests/amp-next-page-v2/articles/article-long.html b/examples/visual-tests/amp-next-page-v2/articles/article-long.html new file mode 100644 index 000000000000..3e8dd8e017ea --- /dev/null +++ b/examples/visual-tests/amp-next-page-v2/articles/article-long.html @@ -0,0 +1,134 @@ + + + + + AMP Article with parallax title + + + + + + + + +
+

Long Article

+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ + + +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+ + + +

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+
+
+ + + diff --git a/examples/visual-tests/amp-next-page-v2/articles/article-short.html b/examples/visual-tests/amp-next-page-v2/articles/article-short.html new file mode 100644 index 000000000000..80b21bdb2947 --- /dev/null +++ b/examples/visual-tests/amp-next-page-v2/articles/article-short.html @@ -0,0 +1,63 @@ + + + + + AMP Article with parallax title + + + + + + + + +
+

Short Article

+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. + + Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+
+
+ + + diff --git a/examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html b/examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html new file mode 100644 index 000000000000..49c7b89a6914 --- /dev/null +++ b/examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html @@ -0,0 +1,158 @@ + + + + + AMP Article with parallax title + + + + + + + + +
+

Long Article

+ +
+
I am a position fixed element
+
I am a position absolute element
+
I am a position sticky element
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ + + +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+ + + +

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+
+
+ + diff --git a/examples/visual-tests/iframe-wrapper.html b/examples/visual-tests/iframe-wrapper.html new file mode 100644 index 000000000000..a4bbfe4b2f2d --- /dev/null +++ b/examples/visual-tests/iframe-wrapper.html @@ -0,0 +1,21 @@ + + + + + + + Percy iframe wrapper + + + + + + diff --git a/extensions/amp-next-page/0.2/amp-next-page.js b/extensions/amp-next-page/0.2/amp-next-page.js index f1b5d72dd7fc..1eccb6af7c2d 100644 --- a/extensions/amp-next-page/0.2/amp-next-page.js +++ b/extensions/amp-next-page/0.2/amp-next-page.js @@ -45,15 +45,12 @@ export class AmpNextPage extends AMP.BaseElement { 'Experiment amp-next-page-v2 disabled' ); - this.nextPageService_ = Services.nextPageServiceForDoc(this.getAmpDoc()); - - // Prevent multiple amp-next-page on the same document - if (this.nextPageService_.isBuilt()) { - return; - } - - this.element.classList.add('i-amphtml-next-page'); + const ampDoc = this.getAmpDoc(); + const hostDoc = ampDoc.shadowRoot + ? ampDoc.shadowRoot.ownerDocument + : ampDoc.win.document; + this.nextPageService_ = Services.nextPageServiceForDoc(hostDoc); return this.nextPageService_.build(this.element); } } diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index 994caad7e0de..adf15a2bfb19 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -111,6 +111,20 @@ export class NextPageService { * @param {!AmpElement} element */ build(element) { + // Get the separator and more box (and remove the provided elements in the process) + const separator = this.getSeparatorElement_(element); + const moreBox = this.getMoreBoxElement_(element); + + // Prevent multiple amp-next-page on the same document + if (this.isBuilt()) { + return; + } + + // Set the parsed elements as the choice for all subsequent elements + this.element_ = element; + this.separator_ = separator; + this.moreBox_ = moreBox; + // Create a reference to the host page this.initialPage_ = this.createInitialPage(); @@ -124,10 +138,6 @@ export class NextPageService { Services.timerFor(this.win_) ); - this.element_ = element; - this.separator_ = this.getSeparatorElement_(); - this.moreBox_ = this.getMoreBoxElement_(); - // Have the suggestion box be always visible this.element_.appendChild(this.moreBox_); @@ -145,6 +155,8 @@ export class NextPageService { }); }); + this.getHostNextPageElement_().classList.add('i-amphtml-next-page'); + this.viewport_.onScroll(() => this.updateScroll_()); this.viewport_.onResize(() => this.updateScroll_()); this.updateScroll_(); @@ -154,7 +166,7 @@ export class NextPageService { * @return {!AmpElement} * @private */ - getNextPageElement_() { + getHostNextPageElement_() { return dev().assertElement(this.element_); } @@ -414,7 +426,7 @@ export class NextPageService { * @private */ getPagesPromise_() { - const inlinePages = this.getInlinePages_(); + const inlinePages = this.getInlinePages_(this.getHostNextPageElement_()); const src = this.element_.getAttribute('src'); userAssert( inlinePages || src, @@ -433,14 +445,12 @@ export class NextPageService { /** * Reads the inline next pages from the element. + * @param {!Element} element the container of the amp-next-page extension * @return {?Array} JSON object, or null if no inline pages specified. * @private */ - getInlinePages_() { - const scriptElements = childElementsByTag( - this.getNextPageElement_(), - 'SCRIPT' - ); + getInlinePages_(element) { + const scriptElements = childElementsByTag(element, 'SCRIPT'); if (!scriptElements.length) { return null; } @@ -465,12 +475,13 @@ export class NextPageService { /** * Reads the developer-provided separator element or defaults * to the internal implementation of it + * @param {!Element} element the container of the amp-next-page extension * @return {!Element} * @private */ - getSeparatorElement_() { + getSeparatorElement_(element) { const providedSeparator = childElementByAttr( - this.getNextPageElement_(), + element, 'amp-next-page-separator' ); // TODO(wassgha): Use templates (amp-mustache) to render the separator @@ -491,12 +502,13 @@ export class NextPageService { } /** + * @param {!Element} element the container of the amp-next-page extension * @return {!Element} * @private */ - getMoreBoxElement_() { + getMoreBoxElement_(element) { const providedMoreBox = childElementByAttr( - this.getNextPageElement_(), + element, 'amp-next-page-more-box' ); // TODO(wassgha): Use templates (amp-mustache) to render the more box diff --git a/test/manual/amp-next-page/0.2/amp-next-page.amp.html b/test/manual/amp-next-page/0.2/amp-next-page.amp.html index fc0df676e7c4..e84cb820650b 100644 --- a/test/manual/amp-next-page/0.2/amp-next-page.amp.html +++ b/test/manual/amp-next-page/0.2/amp-next-page.amp.html @@ -23,7 +23,7 @@
-

Content discovery

+

Host page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque @@ -166,6 +166,7 @@

Content discovery

varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque @@ -265,32 +266,22 @@

Content discovery

{ "image": "/examples/img/hero@1x.jpg", "title": "Page 1", - "url": "/examples/article-parallax.amp.html" + "url": "./articles/article-short.html" }, { "image": "/examples/img/hero@1x.jpg", "title": "Page 2", - "url": "/examples/article-fixed-header.amp.html" + "url": "./articles/article-with-fixed.html" }, { "image": "/examples/img/hero@1x.jpg", "title": "Page 3", - "url": "/examples/amp-next-page.amp.html" + "url": "./articles/article-long.html" }, { "image": "/examples/img/hero@1x.jpg", "title": "Page 4", - "url": "/examples/article.amp.html" - }, - { - "image": "/examples/img/hero@1x.jpg", - "title": "Page 5", - "url": "/examples/article.amp.html" - }, - { - "image": "/examples/img/hero@1x.jpg", - "title": "Page 6", - "url": "/examples/article.amp.html" + "url": "./amp-next-page.amp.html" } ] diff --git a/test/manual/amp-next-page/0.2/articles/article-long.html b/test/manual/amp-next-page/0.2/articles/article-long.html new file mode 100644 index 000000000000..3e8dd8e017ea --- /dev/null +++ b/test/manual/amp-next-page/0.2/articles/article-long.html @@ -0,0 +1,134 @@ + + + + + AMP Article with parallax title + + + + + + + + +
+

Long Article

+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ + + +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+ + + +

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+
+
+ + + diff --git a/test/manual/amp-next-page/0.2/articles/article-short.html b/test/manual/amp-next-page/0.2/articles/article-short.html new file mode 100644 index 000000000000..f0ad01b4ef83 --- /dev/null +++ b/test/manual/amp-next-page/0.2/articles/article-short.html @@ -0,0 +1,61 @@ + + + + + AMP Article with parallax title + + + + + + + + +
+

Short Article

+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+
+
+ + + diff --git a/test/manual/amp-next-page/0.2/articles/article-with-fixed.html b/test/manual/amp-next-page/0.2/articles/article-with-fixed.html new file mode 100644 index 000000000000..49c7b89a6914 --- /dev/null +++ b/test/manual/amp-next-page/0.2/articles/article-with-fixed.html @@ -0,0 +1,158 @@ + + + + + AMP Article with parallax title + + + + + + + + +
+

Long Article

+ +
+
I am a position fixed element
+
I am a position absolute element
+
I am a position sticky element
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ + + +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+ + + +

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+
+
+ + diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests index ce7889f8fe44..22a433bdfb31 100644 --- a/test/visual-diff/visual-tests +++ b/test/visual-diff/visual-tests @@ -789,5 +789,26 @@ "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js", "loading_complete_selectors": [".i-amphtml-video-component"], }, + { + "url": "examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html", + "name": "amp-next-page-v2.load-fixed-article", + "viewport": {"width": 800, "height": 600}, + "loading_complete_selectors": [".i-amphtml-next-page"], + "enable_percy_javascript": true + }, + { + "url": "examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html", + "name": "amp-next-page-v2.load-short-article", + "viewport": {"width": 800, "height": 600}, + "loading_complete_selectors": [".i-amphtml-next-page"], + "enable_percy_javascript": true + }, + { + "url": "examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html", + "name": "amp-next-page-v2.scroll-too-fast", + "viewport": {"width": 800, "height": 600}, + "loading_complete_selectors": [".i-amphtml-next-page"], + "enable_percy_javascript": true + }, ] } From fd8de0da9911496b7c2ee53f5d8b2d4569264b66 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Thu, 19 Dec 2019 10:48:37 -0800 Subject: [PATCH 02/13] Prototyping sticky element handling in amp-next-page --- .../amp-next-page/0.2/amp-next-page.css | 14 +- extensions/amp-next-page/0.2/page.js | 17 + extensions/amp-next-page/0.2/service.js | 113 ++++++- extensions/amp-next-page/0.2/utils.js | 16 - .../amp-next-page-v1.element-visibility.html | 317 ++++++++++++++++++ .../0.2/amp-next-page.element-visibility.html | 311 +++++++++++++++++ .../0.2/articles/element-visibility-1.html | 289 ++++++++++++++++ .../0.2/articles/element-visibility-2.html | 289 ++++++++++++++++ validator/validator-main.protoascii | 4 + 9 files changed, 1350 insertions(+), 20 deletions(-) create mode 100644 test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html create mode 100644 test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html create mode 100644 test/manual/amp-next-page/0.2/articles/element-visibility-1.html create mode 100644 test/manual/amp-next-page/0.2/articles/element-visibility-2.html diff --git a/extensions/amp-next-page/0.2/amp-next-page.css b/extensions/amp-next-page/0.2/amp-next-page.css index fa0b448e7301..7955d6b1d775 100644 --- a/extensions/amp-next-page/0.2/amp-next-page.css +++ b/extensions/amp-next-page/0.2/amp-next-page.css @@ -15,5 +15,17 @@ */ .i-amphtml-next-page-document { - overflow-y: hidden; + opacity: 0.4; + transition: opacity 0.3s; + overflow: hidden; +} + +.i-amphtml-next-page-document:not(.amp-next-page-document-visible) + [i-amphtml-fixedid] { + display: none; +} + +.i-amphtml-next-page-document.amp-next-page-document-visible { + opacity: 1; + overflow: visible; } diff --git a/extensions/amp-next-page/0.2/page.js b/extensions/amp-next-page/0.2/page.js index edf4c7c92615..d8274c7d18ba 100644 --- a/extensions/amp-next-page/0.2/page.js +++ b/extensions/amp-next-page/0.2/page.js @@ -99,6 +99,14 @@ export class Page { return this.relativePos_; } + /** @return {!Document|undefined} */ + get document() { + if (!this.shadowDoc_) { + return; + } + return /** @type {!Document} */ (this.shadowDoc_.ampdoc.getRootNode()); + } + /** * @return {boolean} */ @@ -125,6 +133,15 @@ export class Page { this.visibilityState_ = visibilityState; if (this.shadowDoc_) { this.shadowDoc_.setVisibilityState(visibilityState); + if (visibilityState === VisibilityState.VISIBLE) { + this.shadowDoc_.ampdoc + .getBody() + .classList.add('amp-next-page-document-visible'); + } else { + this.shadowDoc_.ampdoc + .getBody() + .classList.remove('amp-next-page-document-visible'); + } } // Switch the title and url of the page to reflect this page diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index 994caad7e0de..1c19a9be631e 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -37,8 +37,10 @@ import { parseOgImage, parseSchemaImage, } from '../../../src/mediasession-helper'; -import {sanitizeDoc, validatePage, validateUrl} from './utils'; +import {toArray} from '../../../src/types'; +import {toggle} from '../../../src/style'; import {tryParseJson} from '../../../src/json'; +import {validatePage, validateUrl} from './utils'; const TAG = 'amp-next-page'; const PRERENDER_VIEWPORT_COUNT = 3; @@ -96,6 +98,12 @@ export class NextPageService { /** @private {?Page} */ this.initialPage_ = null; + + /** @private {!Object} */ + this.replaceableElements_ = {}; + + /** @private {!Object} */ + this.persistentElements_ = {}; } /** @@ -113,6 +121,7 @@ export class NextPageService { build(element) { // Create a reference to the host page this.initialPage_ = this.createInitialPage(); + this.handleElementHiding(this.win_.document, true /** isHost */); this.history_ = Services.historyForDoc(this.ampdoc_); this.initializeHistory(); @@ -224,6 +233,25 @@ export class NextPageService { if (!this.pages_.some(page => page.isVisible())) { this.initialPage_.setVisibility(VisibilityState.VISIBLE); } + + // Hide elements if necessary + this.pages_ + .filter(page => page.isVisible()) + .forEach(page => { + if (page == this.initialPage_) { + this.handleElementHiding( + this.win_.document, + true /** isHost */, + true /** isVisible */ + ); + } else if (page.document) { + this.handleElementHiding( + page.document, + false /** isHost */, + true /** isVisible */ + ); + } + }); } /** @@ -322,8 +350,8 @@ export class NextPageService { position => page.footerPositionChanged(position) ); - // Handles extension deny-lists and sticky items - sanitizeDoc(doc); + // Handles extension deny-lists + this.sanitizeDoc(doc); // Insert the separator this.element_.insertBefore(this.separator_.cloneNode(true), this.moreBox_); @@ -352,6 +380,85 @@ export class NextPageService { } } + /** + * Removes redundancies and unauthorized extensions and elements + * @param {!Document} doc Document to attach. + */ + sanitizeDoc(doc) { + // TODO(wassgha): Implement handling of sticky elements + // TODO(wassgha): Implement persistence of repeating elements (e.g amp-sidebar) + + // TODO(wassgha): Parse for more pages to queue + + // TODO(wassgha): Allow amp-analytics after bug bash + toArray(doc.querySelectorAll('amp-analytics')).forEach(removeElement); + this.handleElementHiding(doc, false /** isHost */, false /** isVisible */); + } + + /** + * Hides or shows elements based on the `amp-next-page-hide`, + * `amp-next-page-keep` and `amp-next-page-replace` attributes + * @param {!Document} doc Document to attach. + * @param {boolean=} isHost Whether this is the initial page + * @param {boolean=} isVisible Whether this page is visible or not + */ + handleElementHiding(doc, isHost = false, isVisible = true) { + if (!isHost) { + this.hideNextPageHiddenElements(doc); + } + + toArray(doc.querySelectorAll('[amp-next-page-keep]')).forEach(element => { + if (!element.hasAttribute('amp-next-page-keep')) { + element.setAttribute( + 'amp-next-page-keep', + String(Date.now() + Math.floor(Math.random() * 100)) + ); + } + const id = element.getAttribute('amp-next-page-keep'); + if ( + this.persistentElements_[id] && + this.persistentElements_[id] !== element + ) { + toggle(element, false /** opt_display */); + } else if (isVisible) { + this.persistentElements_[id] = element; + } + }); + + if (isVisible) { + toArray(doc.querySelectorAll('[amp-next-page-replace]')).forEach( + element => { + if (!element.hasAttribute('amp-next-page-replace')) { + element.setAttribute( + 'amp-next-page-replace', + String(Date.now() + Math.floor(Math.random() * 100)) + ); + } + const id = element.getAttribute('amp-next-page-replace'); + if ( + this.replaceableElements_[id] && + this.replaceableElements_[id] !== element + ) { + toggle(this.replaceableElements_[id], false /** opt_display */); + } + this.replaceableElements_[id] = element; + toggle(element, true /** opt_display */); + } + ); + } + } + + /** + * Hides or shows elements based on the `amp-next-page-hide`, + * `amp-next-page-keep` and `amp-next-page-replace` attributes + * @param {!Document} doc Document to attach. + */ + hideNextPageHiddenElements(doc) { + toArray(doc.querySelectorAll('[amp-next-page-hide]')).forEach(element => + toggle(element, false /** opt_display */) + ); + } + /** * @return {number} viewports left to reach the end of the document * @private diff --git a/extensions/amp-next-page/0.2/utils.js b/extensions/amp-next-page/0.2/utils.js index c0950b8d00a3..5470bda6f96d 100644 --- a/extensions/amp-next-page/0.2/utils.js +++ b/extensions/amp-next-page/0.2/utils.js @@ -20,8 +20,6 @@ import { parseUrlDeprecated, resolveRelativeUrl, } from '../../../src/url'; -import {removeElement} from '../../../src/dom'; -import {toArray} from '../../../src/types'; import {user, userAssert} from '../../../src/log'; /** @@ -69,17 +67,3 @@ export function validatePage(page, hostUrl) { (url.hash || ''); } } - -/** - * Removes redundancies and unauthorized extensions and elements - * @param {!Document} doc Document to attach. - */ -export function sanitizeDoc(doc) { - // TODO(wassgha): Implement handling of sticky elements - // TODO(wassgha): Implement persistence of repeating elements (e.g amp-sidebar) - - // TODO(wassgha): Parse for more pages to queue - - // TODO(wassgha): Allow amp-analytics after bug bash - toArray(doc.querySelectorAll('amp-analytics')).forEach(removeElement); -} diff --git a/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html b/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html new file mode 100644 index 000000000000..ca39ea70066f --- /dev/null +++ b/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html @@ -0,0 +1,317 @@ + + + + + AMP next page element visibility examples + + + + + + + + + + + + +
+

Content discovery

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+
I should get replaced by my sibling from each loaded page (page 0)
+
I should get preserved although other instances of me exist on later pages (page 0)
+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + +
+ Read more +
+
+ Here are a few more articles ... +
+ + + diff --git a/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html b/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html new file mode 100644 index 000000000000..4f790f15eae8 --- /dev/null +++ b/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html @@ -0,0 +1,311 @@ + + + + + AMP next page element visibility examples + + + + + + + + + + + +
+

Content discovery

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+
I should get replaced by my sibling from each loaded page (page 0)
+
I should get preserved although other instances of me exist on later pages (page 0)
+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + +
+ Read more +
+
+ Here are a few more articles ... +
+ + + diff --git a/test/manual/amp-next-page/0.2/articles/element-visibility-1.html b/test/manual/amp-next-page/0.2/articles/element-visibility-1.html new file mode 100644 index 000000000000..6c1bcadc5199 --- /dev/null +++ b/test/manual/amp-next-page/0.2/articles/element-visibility-1.html @@ -0,0 +1,289 @@ + + + + + AMP next page element visibility examples + + + + + + + + + + + +
+

Content discovery

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+
I got replaced by my sibling from page 1
+
I should get preserved although other instances of me exist on later pages (page 1)
+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + diff --git a/test/manual/amp-next-page/0.2/articles/element-visibility-2.html b/test/manual/amp-next-page/0.2/articles/element-visibility-2.html new file mode 100644 index 000000000000..bec0923c106d --- /dev/null +++ b/test/manual/amp-next-page/0.2/articles/element-visibility-2.html @@ -0,0 +1,289 @@ + + + + + AMP next page element visibility examples + + + + + + + + + + + +
+

Content discovery

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+ +

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+
I got replaced by my sibling from page 2
+
I should get preserved although other instances of me exist on later pages (page 2)
+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus + nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. + Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis + ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec + pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, + malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit + felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. + Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum + pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus + enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, + consectetur enim. +

+

+ Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque + ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla + nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in + sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed + ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus + ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. + Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. + Nulla imperdiet ex at venenatis dignissim. +

+

+ Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor + ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae + tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, + felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius + in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium + et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis + pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. + Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id + imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris + vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae + libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque + varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam + dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed + turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse + tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio + quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum + non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis + condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis + cursus libero magna imperdiet purus. In condimentum vehicula est, nec + varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl + at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. +

+

+ Donec vehicula nisi eget metus blandit, at semper nunc porttitor. + Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies + scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat + rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. + In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, + sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, + condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non + blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin + felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci + gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis + quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit + rhoncus. Fusce commodo risus id sapien ultrices vehicula. +

+
+ + diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii index 38a67f272936..62b2ba536b87 100644 --- a/validator/validator-main.protoascii +++ b/validator/validator-main.protoascii @@ -6709,6 +6709,10 @@ attr_lists: { attrs: { name: "amp-access-show" } attrs: { name: "amp-access-style" } attrs: { name: "amp-access-template" } + # TODO(wassgha): Launch with amp-next-page 1.0 + # attrs: { name: "amp-next-page-hide" } + # attrs: { name: "amp-next-page-replace" } + # attrs: { name: "amp-next-page-keep" } attrs: { name: "i-amp-access-id" } # amp-form specific attributes, see # https://github.com/ampproject/amphtml/issues/5268 From bac73c6218a5684f629a485ebf0526e1952dcaa6 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Thu, 2 Jan 2020 06:07:37 +0100 Subject: [PATCH 03/13] Deprecate amp-next-page-keep in favor of amp-next-page-hidden --- extensions/amp-next-page/0.2/page.js | 16 ++--- extensions/amp-next-page/0.2/service.js | 69 ++++--------------- .../amp-next-page-v1.element-visibility.html | 2 +- .../0.2/amp-next-page.element-visibility.html | 2 +- .../0.2/articles/element-visibility-1.html | 2 +- .../0.2/articles/element-visibility-2.html | 2 +- validator/validator-main.protoascii | 1 - 7 files changed, 25 insertions(+), 69 deletions(-) diff --git a/extensions/amp-next-page/0.2/page.js b/extensions/amp-next-page/0.2/page.js index febf8095006d..43d282322f22 100644 --- a/extensions/amp-next-page/0.2/page.js +++ b/extensions/amp-next-page/0.2/page.js @@ -28,6 +28,8 @@ export const PageState = { INSERTED: 4, }; +const VISIBLE_DOC_CLASS = 'amp-next-page-document-visible'; + export class Page { /** * @param {!./service.NextPageService} manager @@ -126,19 +128,13 @@ export class Page { this.visibilityState_ = visibilityState; if (this.shadowDoc_) { this.shadowDoc_.setVisibilityState(visibilityState); - if (visibilityState === VisibilityState.VISIBLE) { - this.shadowDoc_.ampdoc - .getBody() - .classList.add('amp-next-page-document-visible'); - } else { - this.shadowDoc_.ampdoc - .getBody() - .classList.remove('amp-next-page-document-visible'); - } + this.shadowDoc_.ampdoc + .getBody() + .classList.toggle(VISIBLE_DOC_CLASS, this.isVisible()); } // Switch the title and url of the page to reflect this page - if (visibilityState === VisibilityState.VISIBLE) { + if (this.isVisible()) { this.manager_.setTitlePage(this); } } diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index f196b7f7a4d6..6e89743c05ca 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -96,9 +96,6 @@ export class NextPageService { /** @private {!Object} */ this.replaceableElements_ = {}; - - /** @private {!Object} */ - this.persistentElements_ = {}; } /** @@ -220,21 +217,12 @@ export class NextPageService { // Hide elements if necessary this.pages_ .filter(page => page.isVisible()) - .forEach(page => { - if (page == this.initialPage_) { - this.handleElementHiding( - this.win_.document, - true /** isHost */, - true /** isVisible */ - ); - } else if (page.document) { - this.handleElementHiding( - page.document, - false /** isHost */, - true /** isVisible */ - ); - } - }); + .forEach(page => + this.handleElementHiding( + this.win_.document, + page === this.initialPage_ /** isHost */ + ) + ); } /** @@ -366,50 +354,34 @@ export class NextPageService { * @param {!Document} doc Document to attach. */ sanitizeDoc(doc) { - // TODO(wassgha): Implement handling of sticky elements - // TODO(wassgha): Implement persistence of repeating elements (e.g amp-sidebar) - // TODO(wassgha): Parse for more pages to queue // TODO(wassgha): Allow amp-analytics after bug bash toArray(doc.querySelectorAll('amp-analytics')).forEach(removeElement); + // Make sure all hidden elements are initially invisible this.handleElementHiding(doc, false /** isHost */, false /** isVisible */); } /** - * Hides or shows elements based on the `amp-next-page-hide`, - * `amp-next-page-keep` and `amp-next-page-replace` attributes + * Hides or shows elements based on the `amp-next-page-hide` and + * `amp-next-page-replace` attributes * @param {!Document} doc Document to attach. * @param {boolean=} isHost Whether this is the initial page * @param {boolean=} isVisible Whether this page is visible or not */ handleElementHiding(doc, isHost = false, isVisible = true) { + // Hide elements that have [amp-next-page-hide] on child documents if (!isHost) { - this.hideNextPageHiddenElements(doc); + toArray(doc.querySelectorAll('[amp-next-page-hide]')).forEach(element => + toggle(element, false /** opt_display */) + ); } - toArray(doc.querySelectorAll('[amp-next-page-keep]')).forEach(element => { - if (!element.hasAttribute('amp-next-page-keep')) { - element.setAttribute( - 'amp-next-page-keep', - String(Date.now() + Math.floor(Math.random() * 100)) - ); - } - const id = element.getAttribute('amp-next-page-keep'); - if ( - this.persistentElements_[id] && - this.persistentElements_[id] !== element - ) { - toggle(element, false /** opt_display */); - } else if (isVisible) { - this.persistentElements_[id] = element; - } - }); - + // Replace elements that have [amp-next-page-replace] if (isVisible) { toArray(doc.querySelectorAll('[amp-next-page-replace]')).forEach( element => { - if (!element.hasAttribute('amp-next-page-replace')) { + if (!element.getAttribute('amp-next-page-replace')) { element.setAttribute( 'amp-next-page-replace', String(Date.now() + Math.floor(Math.random() * 100)) @@ -429,17 +401,6 @@ export class NextPageService { } } - /** - * Hides or shows elements based on the `amp-next-page-hide`, - * `amp-next-page-keep` and `amp-next-page-replace` attributes - * @param {!Document} doc Document to attach. - */ - hideNextPageHiddenElements(doc) { - toArray(doc.querySelectorAll('[amp-next-page-hide]')).forEach(element => - toggle(element, false /** opt_display */) - ); - } - /** * @return {number} viewports left to reach the end of the document * @private diff --git a/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html b/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html index 58900f8ffcaf..08c96f857baf 100644 --- a/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html +++ b/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html @@ -78,7 +78,7 @@

Content discovery

consectetur enim.

I should get replaced by my sibling from each loaded page (page 0 ⚪)
-
I should get preserved although other instances of me exist on later pages (page 0)
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 0 ⚪)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html b/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html index 62421ec622c6..9bbcd2ca1607 100644 --- a/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html +++ b/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html @@ -77,7 +77,7 @@

Content discovery

consectetur enim.

I should get replaced by my sibling from each loaded page (page 0 ⚪)
-
I should get preserved although other instances of me exist on later pages (page 0 ⚪)
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 0 ⚪)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/test/manual/amp-next-page/0.2/articles/element-visibility-1.html b/test/manual/amp-next-page/0.2/articles/element-visibility-1.html index 6f2e495dcb6a..f1009bf8ee01 100644 --- a/test/manual/amp-next-page/0.2/articles/element-visibility-1.html +++ b/test/manual/amp-next-page/0.2/articles/element-visibility-1.html @@ -77,7 +77,7 @@

Content discovery

consectetur enim.

I got replaced by my sibling from page 1 ⚪⚪
-
I should get preserved although other instances of me exist on later pages (page 1 ⚪⚪)
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 1 ⚪⚪)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/test/manual/amp-next-page/0.2/articles/element-visibility-2.html b/test/manual/amp-next-page/0.2/articles/element-visibility-2.html index 709f37fab9eb..00cc38c93c20 100644 --- a/test/manual/amp-next-page/0.2/articles/element-visibility-2.html +++ b/test/manual/amp-next-page/0.2/articles/element-visibility-2.html @@ -77,7 +77,7 @@

Content discovery

consectetur enim.

I got replaced by my sibling from page 2 ⚪⚪⚪
-
I should get preserved although other instances of me exist on later pages (page 2 ⚪⚪⚪)
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 2 ⚪⚪⚪)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/validator/validator-main.protoascii b/validator/validator-main.protoascii index 62b2ba536b87..34d7b4edca5b 100644 --- a/validator/validator-main.protoascii +++ b/validator/validator-main.protoascii @@ -6712,7 +6712,6 @@ attr_lists: { # TODO(wassgha): Launch with amp-next-page 1.0 # attrs: { name: "amp-next-page-hide" } # attrs: { name: "amp-next-page-replace" } - # attrs: { name: "amp-next-page-keep" } attrs: { name: "i-amp-access-id" } # amp-form specific attributes, see # https://github.com/ampproject/amphtml/issues/5268 From 8295a3380cad0993a5af4c2f03790ac7faeea218 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Thu, 2 Jan 2020 06:43:57 +0100 Subject: [PATCH 04/13] Visibility bug fix --- extensions/amp-next-page/0.2/service.js | 4 +++- .../0.2/amp-next-page-v1.element-visibility.html | 4 ++-- .../amp-next-page/0.2/amp-next-page.element-visibility.html | 4 ++-- .../amp-next-page/0.2/articles/element-visibility-1.html | 4 ++-- .../amp-next-page/0.2/articles/element-visibility-2.html | 4 ++-- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index 6e89743c05ca..08f381e485df 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -219,7 +219,9 @@ export class NextPageService { .filter(page => page.isVisible()) .forEach(page => this.handleElementHiding( - this.win_.document, + page === this.initialPage_ + ? this.win_.document + : /** @type {!Document} */ (dev().assertElement(page.document)), page === this.initialPage_ /** isHost */ ) ); diff --git a/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html b/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html index 08c96f857baf..61043240fa63 100644 --- a/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html +++ b/test/manual/amp-next-page/0.2/amp-next-page-v1.element-visibility.html @@ -77,8 +77,8 @@

Content discovery

enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, consectetur enim.

-
I should get replaced by my sibling from each loaded page (page 0 ⚪)
-
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 0 ⚪)
+
I should get replaced by my sibling from each loaded page (page 0)
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 0)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html b/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html index 9bbcd2ca1607..d7d5bf88a94d 100644 --- a/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html +++ b/test/manual/amp-next-page/0.2/amp-next-page.element-visibility.html @@ -76,8 +76,8 @@

Content discovery

enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, consectetur enim.

-
I should get replaced by my sibling from each loaded page (page 0 ⚪)
-
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 0 ⚪)
+
I should get replaced by my sibling from each loaded page (page 0)
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 0)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/test/manual/amp-next-page/0.2/articles/element-visibility-1.html b/test/manual/amp-next-page/0.2/articles/element-visibility-1.html index f1009bf8ee01..5f3ef4e57acf 100644 --- a/test/manual/amp-next-page/0.2/articles/element-visibility-1.html +++ b/test/manual/amp-next-page/0.2/articles/element-visibility-1.html @@ -76,8 +76,8 @@

Content discovery

enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, consectetur enim.

-
I got replaced by my sibling from page 1 ⚪⚪
-
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 1 ⚪⚪)
+
I got replaced by my sibling from page 1
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 1)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla diff --git a/test/manual/amp-next-page/0.2/articles/element-visibility-2.html b/test/manual/amp-next-page/0.2/articles/element-visibility-2.html index 00cc38c93c20..bd837844a2a3 100644 --- a/test/manual/amp-next-page/0.2/articles/element-visibility-2.html +++ b/test/manual/amp-next-page/0.2/articles/element-visibility-2.html @@ -76,8 +76,8 @@

Content discovery

enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, consectetur enim.

-
I got replaced by my sibling from page 2 ⚪⚪⚪
-
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 2 ⚪⚪⚪)
+
I got replaced by my sibling from page 2
+
I am fixed and should be visible when loaded as a host page but hidden if loaded as a next-page (page 2)

Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla From bf9e8a6bc0f1f981e8fb32c963d857be6f670943 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Mon, 6 Jan 2020 12:57:17 -0800 Subject: [PATCH 05/13] Remove animation added for testing --- extensions/amp-next-page/0.2/amp-next-page.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/extensions/amp-next-page/0.2/amp-next-page.css b/extensions/amp-next-page/0.2/amp-next-page.css index 7955d6b1d775..a43d7b99a954 100644 --- a/extensions/amp-next-page/0.2/amp-next-page.css +++ b/extensions/amp-next-page/0.2/amp-next-page.css @@ -15,8 +15,6 @@ */ .i-amphtml-next-page-document { - opacity: 0.4; - transition: opacity 0.3s; overflow: hidden; } From 2085a36cb64507860c58d8008a79440356fa9fce Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Wed, 8 Jan 2020 11:06:06 -0800 Subject: [PATCH 06/13] Exported host-page-specific parameters into HostPage --- extensions/amp-next-page/0.2/page.js | 37 ++++++++--- extensions/amp-next-page/0.2/service.js | 83 ++++++++++++------------- 2 files changed, 68 insertions(+), 52 deletions(-) diff --git a/extensions/amp-next-page/0.2/page.js b/extensions/amp-next-page/0.2/page.js index 43d282322f22..dbcd58963878 100644 --- a/extensions/amp-next-page/0.2/page.js +++ b/extensions/amp-next-page/0.2/page.js @@ -34,15 +34,8 @@ export class Page { /** * @param {!./service.NextPageService} manager * @param {{ url: string, title: string, image: string }} meta - * @param {!PageState=} initState - * @param {!VisibilityState=} initVisibility */ - constructor( - manager, - meta, - initState = PageState.QUEUED, - initVisibility = VisibilityState.PRERENDER - ) { + constructor(manager, meta) { /** @private @const {!./service.NextPageService} */ this.manager_ = manager; /** @private @const {string} */ @@ -55,9 +48,9 @@ export class Page { /** @private {?../../../src/runtime.ShadowDoc} */ this.shadowDoc_ = null; /** @private {!PageState} */ - this.state_ = initState; + this.state_ = PageState.QUEUED; /** @private {!VisibilityState} */ - this.visibilityState_ = initVisibility; + this.visibilityState_ = VisibilityState.PRERENDER; /** @private {!ViewportRelativePos} */ this.relativePos_ = ViewportRelativePos.OUTSIDE_VIEWPORT; } @@ -192,3 +185,27 @@ export class Page { }); } } + +export class HostPage extends Page { + /** + * @param {!./service.NextPageService} manager + * @param {{ url: string, title: string, image: string }} meta + * @param {!PageState} initState + * @param {!VisibilityState} initVisibility + * @param {!Document} initDoc + */ + constructor(manager, meta, initState, initVisibility, initDoc) { + super(manager, meta); + /** @override */ + this.state_ = initState; + /** @override */ + this.visibilityState_ = initVisibility; + /** @private {!Document} */ + this.document_ = initDoc; + } + + /** @override */ + get document() { + return this.document_; + } +} diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index 08f381e485df..29df766c9fad 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -15,8 +15,8 @@ */ import {CSS} from '../../../build/amp-next-page-0.2.css'; +import {HostPage, Page, PageState} from './page'; import {MultidocManager} from '../../../src/multidoc-manager'; -import {Page, PageState} from './page'; import {Services} from '../../../src/services'; import {VisibilityState} from '../../../src/visibility-state'; import { @@ -92,7 +92,7 @@ export class NextPageService { this.lastScrollTop_ = 0; /** @private {?Page} */ - this.initialPage_ = null; + this.hostPage_ = null; /** @private {!Object} */ this.replaceableElements_ = {}; @@ -112,8 +112,8 @@ export class NextPageService { */ build(element) { // Create a reference to the host page - this.initialPage_ = this.createInitialPage(); - this.handleElementHiding(this.win_.document, true /** isHost */); + this.hostPage_ = this.createHostPage(); + this.toggleHiddenAndReplaceableElements(this.win_.document); this.history_ = Services.historyForDoc(this.ampdoc_); this.initializeHistory(); @@ -135,8 +135,8 @@ export class NextPageService { this.element_.appendChild(this.moreBox_); if (!this.pages_) { - this.pages_ = [this.initialPage_]; - this.setLastFetchedPage(this.initialPage_); + this.pages_ = [this.hostPage_]; + this.setLastFetchedPage(this.hostPage_); } this.getPagesPromise_().then(pages => { @@ -211,18 +211,15 @@ export class NextPageService { // If no page is visible then the host page should be if (!this.pages_.some(page => page.isVisible())) { - this.initialPage_.setVisibility(VisibilityState.VISIBLE); + this.hostPage_.setVisibility(VisibilityState.VISIBLE); } // Hide elements if necessary this.pages_ .filter(page => page.isVisible()) .forEach(page => - this.handleElementHiding( - page === this.initialPage_ - ? this.win_.document - : /** @type {!Document} */ (dev().assertElement(page.document)), - page === this.initialPage_ /** isHost */ + this.toggleHiddenAndReplaceableElements( + /** @type {!Document} */ (dev().assertElement(page.document)) ) ); } @@ -245,7 +242,7 @@ export class NextPageService { const shouldHide = page.relativePos === ViewportRelativePos.LEAVING_VIEWPORT || page.relativePos === ViewportRelativePos.OUTSIDE_VIEWPORT || - page === this.initialPage_; + page === this.hostPage_; return shouldHide && page.isVisible(); }) .forEach(page => page.setVisibility(VisibilityState.HIDDEN)); @@ -263,7 +260,7 @@ export class NextPageService { * the provided page * @param {?Page=} page */ - setTitlePage(page = this.initialPage_) { + setTitlePage(page = this.hostPage_) { if (!page) { dev().warn(TAG, 'setTitlePage called before next-page-service is built'); return; @@ -278,7 +275,7 @@ export class NextPageService { * replace when they become visible */ initializeHistory() { - const {title, url} = this.initialPage_; + const {title, url} = this.hostPage_; this.history_.push(undefined /** opt_onPop */, {title, url}); } @@ -286,13 +283,13 @@ export class NextPageService { * * @return {!Page} */ - createInitialPage() { + createHostPage() { const doc = this.win_.document; const {title, location} = doc; const {href: url} = location; const image = parseSchemaImage(doc) || parseOgImage(doc) || parseFavicon(doc) || ''; - return new Page( + return new HostPage( this, { url, @@ -300,7 +297,8 @@ export class NextPageService { image, }, PageState.INSERTED /** initState */, - VisibilityState.VISIBLE /** initVisibility */ + VisibilityState.VISIBLE /** initVisibility */, + doc /** initDoc */ ); } @@ -361,46 +359,47 @@ export class NextPageService { // TODO(wassgha): Allow amp-analytics after bug bash toArray(doc.querySelectorAll('amp-analytics')).forEach(removeElement); // Make sure all hidden elements are initially invisible - this.handleElementHiding(doc, false /** isHost */, false /** isVisible */); + this.toggleHiddenAndReplaceableElements(doc, false /** isVisible */); } /** * Hides or shows elements based on the `amp-next-page-hide` and * `amp-next-page-replace` attributes * @param {!Document} doc Document to attach. - * @param {boolean=} isHost Whether this is the initial page * @param {boolean=} isVisible Whether this page is visible or not */ - handleElementHiding(doc, isHost = false, isVisible = true) { + toggleHiddenAndReplaceableElements(doc, isVisible = true) { // Hide elements that have [amp-next-page-hide] on child documents - if (!isHost) { + if (doc !== this.hostPage_.document) { toArray(doc.querySelectorAll('[amp-next-page-hide]')).forEach(element => toggle(element, false /** opt_display */) ); } + // Element replacing is only concerned with the visible page + if (!isVisible) { + return; + } + // Replace elements that have [amp-next-page-replace] - if (isVisible) { - toArray(doc.querySelectorAll('[amp-next-page-replace]')).forEach( - element => { - if (!element.getAttribute('amp-next-page-replace')) { - element.setAttribute( - 'amp-next-page-replace', - String(Date.now() + Math.floor(Math.random() * 100)) - ); - } - const id = element.getAttribute('amp-next-page-replace'); - if ( - this.replaceableElements_[id] && - this.replaceableElements_[id] !== element - ) { - toggle(this.replaceableElements_[id], false /** opt_display */); - } - this.replaceableElements_[id] = element; - toggle(element, true /** opt_display */); + toArray(doc.querySelectorAll('[amp-next-page-replace]')).forEach( + element => { + let uniqueId = element.getAttribute('amp-next-page-replace'); + if (!uniqueId) { + uniqueId = String(Date.now() + Math.floor(Math.random() * 100)); + element.setAttribute('amp-next-page-replace', uniqueId); } - ); - } + + if ( + this.replaceableElements_[uniqueId] && + this.replaceableElements_[uniqueId] !== element + ) { + toggle(this.replaceableElements_[uniqueId], false /** opt_display */); + } + this.replaceableElements_[uniqueId] = element; + toggle(element, true /** opt_display */); + } + ); } /** From 72ce30ff9723095bed5832ce2407917cfc1eb3e6 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Fri, 10 Jan 2020 02:17:26 -0800 Subject: [PATCH 07/13] Preventing next-page form building again --- extensions/amp-next-page/0.2/amp-next-page.js | 7 +------ extensions/amp-next-page/0.2/service.js | 5 +++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/extensions/amp-next-page/0.2/amp-next-page.js b/extensions/amp-next-page/0.2/amp-next-page.js index 1eccb6af7c2d..6d0c97b00c0d 100644 --- a/extensions/amp-next-page/0.2/amp-next-page.js +++ b/extensions/amp-next-page/0.2/amp-next-page.js @@ -45,12 +45,7 @@ export class AmpNextPage extends AMP.BaseElement { 'Experiment amp-next-page-v2 disabled' ); - const ampDoc = this.getAmpDoc(); - const hostDoc = ampDoc.shadowRoot - ? ampDoc.shadowRoot.ownerDocument - : ampDoc.win.document; - - this.nextPageService_ = Services.nextPageServiceForDoc(hostDoc); + this.nextPageService_ = Services.nextPageServiceForDoc(this.element); return this.nextPageService_.build(this.element); } } diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index 23cbbfb6d88c..77878f452314 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -41,6 +41,7 @@ import VisibilityObserver, {ViewportRelativePos} from './visibility-observer'; const TAG = 'amp-next-page'; const PRERENDER_VIEWPORT_COUNT = 3; +const NEAR_BOTTOM_VIEWPORT_COUNT = 1; /** @enum */ export const Direction = {UP: 1, DOWN: -1}; @@ -308,8 +309,8 @@ export class NextPageService { */ appendAndObservePage(page, doc) { // If the user already scrolled to the bottom, prevent rendering - if (this.getViewportsAway_() <= 1) { - // TODO(wassgha): Append a "load next article" button + if (this.getViewportsAway_() <= NEAR_BOTTOM_VIEWPORT_COUNT) { + // TODO(wassgha): Append a "load next article" button? return null; } From d12c8c636ce3f6c4e06d645ebe0b17f9395b2593 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Fri, 10 Jan 2020 03:31:40 -0800 Subject: [PATCH 08/13] Remove visual diff tests --- .../amp-next-page.load-fixed-article.html | 304 ------------------ .../amp-next-page.load-short-article.html | 304 ------------------ .../amp-next-page.scroll-too-fast.html | 298 ----------------- .../articles/article-long.html | 134 -------- .../articles/article-short.html | 63 ---- .../articles/article-with-fixed.html | 158 --------- test/visual-diff/visual-tests | 21 -- 7 files changed, 1282 deletions(-) delete mode 100644 examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html delete mode 100644 examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html delete mode 100644 examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html delete mode 100644 examples/visual-tests/amp-next-page-v2/articles/article-long.html delete mode 100644 examples/visual-tests/amp-next-page-v2/articles/article-short.html delete mode 100644 examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html diff --git a/examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html b/examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html deleted file mode 100644 index 071ad8edc65d..000000000000 --- a/examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html +++ /dev/null @@ -1,304 +0,0 @@ - - - - - AMP next page examples - - - - - - - - - - -

-

Host page

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-
- - -
- Read more -
-
- Here are a few more articles ... -
- - - diff --git a/examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html b/examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html deleted file mode 100644 index 45812f571562..000000000000 --- a/examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html +++ /dev/null @@ -1,304 +0,0 @@ - - - - - AMP next page examples - - - - - - - - - - -
-

Host page

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-
- - -
- Read more -
-
- Here are a few more articles ... -
- - - diff --git a/examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html b/examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html deleted file mode 100644 index 43cb95e3580a..000000000000 --- a/examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - AMP next page examples - - - - - - - - - - -
-

Host page

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

-

- Maecenas sed quam nec dolor rhoncus rutrum ut non mauris. Pellentesque - ante dolor, pretium quis enim eu, condimentum volutpat augue. Donec nulla - nisl, ullamcorper et hendrerit vel, sagittis sit amet ex. Mauris a enim in - sem feugiat mollis in eu lorem. Quisque finibus a diam ut facilisis. Sed - ultricies massa ut urna dapibus semper. Integer id nunc dictum, luctus - ligula eu, bibendum ex. Etiam tincidunt sapien ut lorem pharetra feugiat. - Aliquam erat volutpat. Sed vehicula tincidunt mauris, vitae cursus nisl. - Nulla imperdiet ex at venenatis dignissim. -

-

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-

- Donec vehicula nisi eget metus blandit, at semper nunc porttitor. - Vestibulum sit amet posuere risus, at mattis nibh. Maecenas ultricies - scelerisque nibh et feugiat. Praesent mattis, nibh viverra consequat - rhoncus, turpis leo venenatis orci, vitae mollis libero magna eget massa. - In dapibus, metus sit amet venenatis finibus, lacus metus rhoncus massa, - sit amet mattis tortor massa vitae nunc. Mauris a enim sagittis, - condimentum tortor vitae, egestas nulla. Ut dictum laoreet sapien non - blandit. Etiam fermentum, magna et tincidunt maximus, ex orci sollicitudin - felis, ut dapibus orci ipsum quis leo. Nam accumsan tortor sit amet orci - gravida, eget dapibus metus dapibus. Fusce congue ultrices dignissim. Duis - quis metus in mi pharetra tempus. Etiam dapibus tellus vitae blandit - rhoncus. Fusce commodo risus id sapien ultrices vehicula. -

-
- - -
- Read more -
-
- Here are a few more articles ... -
- - - diff --git a/examples/visual-tests/amp-next-page-v2/articles/article-long.html b/examples/visual-tests/amp-next-page-v2/articles/article-long.html deleted file mode 100644 index 3e8dd8e017ea..000000000000 --- a/examples/visual-tests/amp-next-page-v2/articles/article-long.html +++ /dev/null @@ -1,134 +0,0 @@ - - - - - AMP Article with parallax title - - - - - - - - -
-

Long Article

- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

- - - -

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

- - - -

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-
-
- - - diff --git a/examples/visual-tests/amp-next-page-v2/articles/article-short.html b/examples/visual-tests/amp-next-page-v2/articles/article-short.html deleted file mode 100644 index 80b21bdb2947..000000000000 --- a/examples/visual-tests/amp-next-page-v2/articles/article-short.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - AMP Article with parallax title - - - - - - - - -
-

Short Article

- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. - - Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

-
-
- - - diff --git a/examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html b/examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html deleted file mode 100644 index 49c7b89a6914..000000000000 --- a/examples/visual-tests/amp-next-page-v2/articles/article-with-fixed.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - - AMP Article with parallax title - - - - - - - - -
-

Long Article

- -
-
I am a position fixed element
-
I am a position absolute element
-
I am a position sticky element
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae - libero porta nulla iaculis viverra. Vestibulum consectetur scelerisque - varius. Nam pulvinar dui a tortor hendrerit, id iaculis elit auctor. Nam - dapibus felis in gravida ornare. Nulla varius id mauris sed venenatis. Sed - turpis ex, aliquet nec fermentum eget, sollicitudin non est. Suspendisse - tincidunt ornare tortor, at vehicula orci aliquam a. Aliquam eleifend odio - quis quam dignissim posuere. Proin ac dolor rhoncus, consectetur ipsum - non, dictum est. Nam sollicitudin est eu est aliquet eleifend. Duis - condimentum, nisl eu finibus auctor, lectus odio fringilla nisi, quis - cursus libero magna imperdiet purus. In condimentum vehicula est, nec - varius est suscipit vitae. Maecenas ut sapien diam. Vivamus viverra nisl - at quam pellentesque posuere. Cras ut nibh non arcu dignissim elementum. -

- - - -

- Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus - nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. - Integer eleifend diam vel nunc porttitor sollicitudin. Aliquam quis - ullamcorper tortor. Morbi et dui vitae elit finibus sodales. Donec - pharetra tincidunt neque, eget sagittis nisi sodales vel. Duis elit massa, - malesuada a rhoncus sed, bibendum nec velit. Duis iaculis magna suscipit - felis fermentum accumsan. Nunc venenatis pellentesque magna at tincidunt. - Mauris nec placerat augue, eu auctor elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum - pretium ligula diam, a eleifend lectus porttitor non. Integer vitae tempus - enim, non pellentesque sem. Nam non sem lacinia, lacinia nisi non, - consectetur enim. -

- - - -

- Sed pretium sed ex eu varius. Praesent sapien purus, tincidunt at dolor - ac, porttitor fermentum enim. Morbi rhoncus quam eu lorem ultrices, vitae - tempor felis volutpat. Suspendisse auctor, quam quis suscipit dictum, - felis lectus imperdiet velit, a faucibus quam diam et risus. Etiam varius - in arcu sed cursus. Praesent pulvinar enim nibh, eu euismod ante pretium - et. Pellentesque nec vestibulum eros. Praesent nec venenatis ipsum. Duis - pharetra suscipit mauris quis dictum. Pellentesque sed porttitor tellus. - Aenean rutrum blandit est in tincidunt. Nulla ante orci, pellentesque id - imperdiet at, posuere quis dui. Cras fringilla lobortis lectus. Mauris - vitae convallis orci. Mauris sodales faucibus nulla vitae posuere. -

-
-
- - diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests index 65e7a0a66279..25b9e9e7c3f9 100644 --- a/test/visual-diff/visual-tests +++ b/test/visual-diff/visual-tests @@ -795,26 +795,5 @@ "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js", "loading_complete_selectors": [".i-amphtml-video-component"], }, - { - "url": "examples/visual-tests/amp-next-page-v2/amp-next-page.load-fixed-article.html", - "name": "amp-next-page-v2.load-fixed-article", - "viewport": {"width": 800, "height": 600}, - "loading_complete_selectors": [".i-amphtml-next-page"], - "enable_percy_javascript": true - }, - { - "url": "examples/visual-tests/amp-next-page-v2/amp-next-page.load-short-article.html", - "name": "amp-next-page-v2.load-short-article", - "viewport": {"width": 800, "height": 600}, - "loading_complete_selectors": [".i-amphtml-next-page"], - "enable_percy_javascript": true - }, - { - "url": "examples/visual-tests/amp-next-page-v2/amp-next-page.scroll-too-fast.html", - "name": "amp-next-page-v2.scroll-too-fast", - "viewport": {"width": 800, "height": 600}, - "loading_complete_selectors": [".i-amphtml-next-page"], - "enable_percy_javascript": true - }, ] } From 81a3e93d015df8cf37277182cdc4e5af10b4f763 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Fri, 10 Jan 2020 05:08:14 -0800 Subject: [PATCH 09/13] Implement infinite loading for amp-next-page v2 --- extensions/amp-next-page/0.2/page.js | 13 +++- extensions/amp-next-page/0.2/service.js | 97 +++++++++++++++++-------- 2 files changed, 77 insertions(+), 33 deletions(-) diff --git a/extensions/amp-next-page/0.2/page.js b/extensions/amp-next-page/0.2/page.js index dbcd58963878..e83652be076b 100644 --- a/extensions/amp-next-page/0.2/page.js +++ b/extensions/amp-next-page/0.2/page.js @@ -42,6 +42,8 @@ export class Page { this.title_ = meta.title; /** @private {string} */ this.url_ = meta.url; + /** @private {string} */ + this.initialUrl_ = meta.url; /** @private @const {string} */ this.image_ = meta.image; @@ -67,6 +69,11 @@ export class Page { this.url_ = url; } + /** @return {string} */ + get initialUrl() { + return this.initialUrl_; + } + /** @return {string} */ get image() { return this.image_; @@ -82,12 +89,12 @@ export class Page { return this.relativePos_; } - /** @return {!Document|undefined} */ + /** @return {!Document|!ShadowRoot|undefined} */ get document() { if (!this.shadowDoc_) { return; } - return /** @type {!Document} */ (this.shadowDoc_.ampdoc.getRootNode()); + return this.shadowDoc_.ampdoc.getRootNode(); } /** @param {!ViewportRelativePos} position */ @@ -182,6 +189,8 @@ export class Page { }) .catch(() => { this.state_ = PageState.FAILED; + // TOOD(wassgha): Silently skips this page, should we re-try or show an error state? + this.manager_.setLastFetchedPage(this); }); } } diff --git a/extensions/amp-next-page/0.2/service.js b/extensions/amp-next-page/0.2/service.js index fae2ac2b67e8..f52da0821c36 100644 --- a/extensions/amp-next-page/0.2/service.js +++ b/extensions/amp-next-page/0.2/service.js @@ -149,14 +149,7 @@ export class NextPageService { this.setLastFetchedPage(this.hostPage_); } - this.getPagesPromise_().then(pages => { - pages.forEach(page => { - validatePage(page, this.ampdoc_.getUrl()); - this.pages_.push( - new Page(this, {url: page.url, title: page.title, image: page.image}) - ); - }); - }); + this.parseAndQueuePages_(); this.getHostNextPageElement_().classList.add('i-amphtml-next-page'); @@ -231,7 +224,7 @@ export class NextPageService { .filter(page => page.isVisible()) .forEach(page => this.toggleHiddenAndReplaceableElements( - /** @type {!Document} */ (dev().assertElement(page.document)) + /** @type {!Document|!ShadowRoot} */ (dev().assert(page.document)) ) ); } @@ -366,10 +359,15 @@ export class NextPageService { * @param {!Document} doc Document to attach. */ sanitizeDoc(doc) { - // TODO(wassgha): Parse for more pages to queue - // TODO(wassgha): Allow amp-analytics after bug bash toArray(doc.querySelectorAll('amp-analytics')).forEach(removeElement); + + // Parse for more pages and queue them + toArray(doc.querySelectorAll('amp-next-page')).forEach(el => { + this.parseAndQueuePages_(el); + removeElement(el); + }); + // Make sure all hidden elements are initially invisible this.toggleHiddenAndReplaceableElements(doc, false /** isVisible */); } @@ -377,7 +375,7 @@ export class NextPageService { /** * Hides or shows elements based on the `amp-next-page-hide` and * `amp-next-page-replace` attributes - * @param {!Document} doc Document to attach. + * @param {!Document|!ShadowRoot} doc Document to attach. * @param {boolean=} isVisible Whether this page is visible or not */ toggleHiddenAndReplaceableElements(doc, isVisible = true) { @@ -394,24 +392,24 @@ export class NextPageService { } // Replace elements that have [amp-next-page-replace] - toArray(doc.querySelectorAll('[amp-next-page-replace]')).forEach( - element => { - let uniqueId = element.getAttribute('amp-next-page-replace'); - if (!uniqueId) { - uniqueId = String(Date.now() + Math.floor(Math.random() * 100)); - element.setAttribute('amp-next-page-replace', uniqueId); - } + toArray( + doc.querySelectorAll('*:not(amp-next-page) [amp-next-page-replace]') + ).forEach(element => { + let uniqueId = element.getAttribute('amp-next-page-replace'); + if (!uniqueId) { + uniqueId = String(Date.now() + Math.floor(Math.random() * 100)); + element.setAttribute('amp-next-page-replace', uniqueId); + } - if ( - this.replaceableElements_[uniqueId] && - this.replaceableElements_[uniqueId] !== element - ) { - toggle(this.replaceableElements_[uniqueId], false /** opt_display */); - } - this.replaceableElements_[uniqueId] = element; - toggle(element, true /** opt_display */); + if ( + this.replaceableElements_[uniqueId] && + this.replaceableElements_[uniqueId] !== element + ) { + toggle(this.replaceableElements_[uniqueId], false /** opt_display */); } - ); + this.replaceableElements_[uniqueId] = element; + toggle(element, true /** opt_display */); + }); } /** @@ -472,12 +470,49 @@ export class NextPageService { } /** + * Parses the amp-next-page element for inline or remote list of pages and + * add them to the queue + * @param {!Element=} element the container of the amp-next-page extension + * @private + */ + parseAndQueuePages_(element = this.getHostNextPageElement_()) { + this.parsePages_(element).then(pages => { + pages.forEach(page => { + try { + validatePage(page, this.ampdoc_.getUrl()); + // Prevent loops by checking if the page already exists + // we use initialUrl since the url can get updated if + // the page issues a redirect + if (this.pages_.some(p => p.initialUrl == page.url)) { + user().warn(TAG, 'Recommendation already queued'); + return; + } + // Queue the page for fetching + this.pages_.push( + new Page(this, { + url: page.url, + title: page.title, + image: page.image, + }) + ); + } catch (e) { + user().error(TAG, 'Failed to queue page', e); + } + }); + // To be safe, if the pages were parsed after the user + // finished scrolling + this.maybeFetchNext(); + }); + } + + /** + * @param {!Element} element the container of the amp-next-page extension * @return {!Promise} List of pages to fetch * @private */ - getPagesPromise_() { - const inlinePages = this.getInlinePages_(this.getHostNextPageElement_()); - const src = this.element_.getAttribute('src'); + parsePages_(element) { + const inlinePages = this.getInlinePages_(element); + const src = element.getAttribute('src'); userAssert( inlinePages || src, '%s should contain a + +
Footer
`; const VALID_CONFIG = [ { 'image': '/examples/img/hero@1x.jpg', @@ -292,6 +317,131 @@ describes.realWin( }); }); + describe('infinite loading', () => { + let element; + let service; + + beforeEach(async () => { + element = await getAMPNextPage({ + inlineConfig: VALID_CONFIG, + }); + + await element.build(); + await element.layoutCallback(); + + service = Services.nextPageServiceForDoc(doc); + }); + + afterEach(async () => { + element.parentNode.removeChild(element); + }); + + it('recursively parses pages and avoids loops', async () => { + env.sandbox.stub(service, 'getViewportsAway_').returns(2); + + expect(service.pages_.length).to.equal(3); + + env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE_WITH_RECOMMENDATIONS); + await service.maybeFetchNext(); + + // Adds the two documents coming from Document 1's recommendations + expect(service.pages_.length).to.equal(5); + expect(service.pages_.some(page => page.title == 'Title 3')).to.be.true; + expect(service.pages_.some(page => page.title == 'Title 4')).to.be.true; + // Avoids loops (ignores previously inserted page) + expect( + service.pages_.filter(page => page.title == 'Title 2').length + ).to.equal(1); + }); + + it('unloads pages and replaces them with a placeholder', async () => { + env.sandbox.stub(service, 'getViewportsAway_').returns(2); + const secondPagePauseSpy = env.sandbox.spy(service.pages_[2], 'pause'); + + env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE); + env.fetchMock.get(/\/document2/, MOCK_NEXT_PAGE); + await service.maybeFetchNext(); + await service.maybeFetchNext(); + + const {container} = service.pages_[2]; + expect(container).to.be.ok; + expect(container.querySelector('.i-amphtml-next-page-placeholder')).to + .not.be.ok; + expect(container.querySelector('.i-amphtml-next-page-shadow-root')).to + .be.ok; + + service.pages_[2].visibilityState_ = VisibilityState.VISIBLE; + service.scrollDirection_ = Direction.UP; + + await service.hidePreviousPages_( + 0 /** index */, + 0 /** forgetPageCountForTesting */ + ); + + // Internally changes the state to paused + expect(secondPagePauseSpy).to.be.calledOnce; + expect(service.pages_[2].state_).to.equal(PageState.PAUSED); + expect(service.pages_[2].visibilityState_).to.equal( + VisibilityState.HIDDEN + ); + + // Replaces the inserted shadow doc with a placeholder of equal height + expect(container.querySelector('.i-amphtml-next-page-placeholder')).to + .be.ok; + expect(container.querySelector('.i-amphtml-next-page-shadow-root')).to + .not.be.ok; + expect( + win.getComputedStyle( + container.querySelector('.i-amphtml-next-page-placeholder') + ).height + ).to.equal('1036px'); + }); + + it('reloads pages and removes the placeholder', async () => { + env.sandbox.stub(service, 'getViewportsAway_').returns(2); + const secondPageResumeSpy = env.sandbox.spy( + service.pages_[2], + 'resume' + ); + + env.fetchMock.get(/\/document1/, MOCK_NEXT_PAGE); + env.fetchMock.get(/\/document2/, MOCK_NEXT_PAGE); + await service.maybeFetchNext(); + await service.maybeFetchNext(); + + const {container} = service.pages_[2]; + expect(container).to.be.ok; + service.pages_[2].visibilityState_ = VisibilityState.VISIBLE; + service.scrollDirection_ = Direction.UP; + await service.hidePreviousPages_( + 0 /** index */, + 0 /** forgetPageCountForTesting */ + ); + expect(service.pages_[2].state_).to.equal(PageState.PAUSED); + expect(service.pages_[2].visibilityState_).to.equal( + VisibilityState.HIDDEN + ); + + service.scrollDirection_ = Direction.DOWN; + await service.resumeForgottenPages_( + 1 /** index */, + 0 /** forgetPageCountForTesting */ + ); + + // Replaces the inserted placeholder with the page's content + expect(secondPageResumeSpy).to.be.calledOnce; + expect(container.querySelector('.i-amphtml-next-page-placeholder')).to + .not.be.ok; + expect(container.querySelector('.i-amphtml-next-page-shadow-root')).to + .be.ok; + expect( + win.getComputedStyle( + container.querySelector('.i-amphtml-next-page-shadow-root') + ).height + ).to.equal('1036px'); + }); + }); + describe('remote config', () => { // TODO (wassgha): Implement once remote config is implemented }); From 6fb9245a59c361019cc286b54589fca6826b51d4 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Mon, 20 Jan 2020 08:01:27 -0800 Subject: [PATCH 12/13] Fixes types --- extensions/amp-next-page/1.0/page.js | 2 +- extensions/amp-next-page/1.0/service.js | 21 ++++++++++----------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/extensions/amp-next-page/1.0/page.js b/extensions/amp-next-page/1.0/page.js index 98a11d0ee347..61d6fa36f3bd 100644 --- a/extensions/amp-next-page/1.0/page.js +++ b/extensions/amp-next-page/1.0/page.js @@ -175,7 +175,7 @@ export class Page { */ pause() { if (!this.shadowDoc_) { - return; + return Promise.resolve(); } return this.shadowDoc_.close().then(() => { this.manager_.closeDocument(this /** page */).then(() => { diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js index c620e5d29edf..15aad26e701d 100644 --- a/extensions/amp-next-page/1.0/service.js +++ b/extensions/amp-next-page/1.0/service.js @@ -195,17 +195,16 @@ export class NextPageService { if (this.pages_.some(page => page.isFetching())) { return Promise.resolve(); } + // If we're still too far from the bottom, early return + if (this.getViewportsAway_() > PRERENDER_VIEWPORT_COUNT && !force) { + return Promise.resolve(); + } - if (force || this.getViewportsAway_() <= PRERENDER_VIEWPORT_COUNT) { - const nextPage = this.pages_[ - this.getPageIndex_(this.lastFetchedPage_) + 1 - ]; - if (nextPage) { - return nextPage.fetch(); - } else { - return Promise.resolve(); - } + const nextPage = this.pages_[this.getPageIndex_(this.lastFetchedPage_) + 1]; + if (!nextPage) { + return Promise.resolve(); } + return nextPage.fetch(); } /** @@ -250,7 +249,7 @@ export class NextPageService { * marked hidden if they are out of the viewport and additionally * paused/forgotten if they are too far from the current page * @param {number} index index of the page to start at - * @param {?number} forgetPageCountForTesting + * @param {number=} forgetPageCountForTesting * @return {!Promise} * @private */ @@ -300,7 +299,7 @@ export class NextPageService { * currently visible page are re-inserted (if forgotten) and * ready to become visible soon * @param {number} index index of the page to start at - * @param {?number} forgetPageCountForTesting + * @param {number=} forgetPageCountForTesting * @private */ resumeForgottenPages_(index, forgetPageCountForTesting) { From 202ed6d55c1f837fe0efa938a70ac755a12bb7f9 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Wed, 22 Jan 2020 14:04:45 -0800 Subject: [PATCH 13/13] Review changes --- extensions/amp-next-page/1.0/service.js | 40 ++++++++++--------- .../1.0/test/test-amp-next-page.js | 8 ++-- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js index 15aad26e701d..876f06105b04 100644 --- a/extensions/amp-next-page/1.0/service.js +++ b/extensions/amp-next-page/1.0/service.js @@ -43,7 +43,7 @@ import VisibilityObserver, {ViewportRelativePos} from './visibility-observer'; const TAG = 'amp-next-page'; const PRERENDER_VIEWPORT_COUNT = 3; const NEAR_BOTTOM_VIEWPORT_COUNT = 1; -const FORGET_PAGE_COUNT = 5; +const PAUSE_PAGE_COUNT = 5; const NEXT_PAGE_CLASS = 'i-amphtml-next-page'; const DOC_CLASS = 'i-amphtml-next-page-document'; @@ -221,7 +221,7 @@ export class NextPageService { page.setVisibility(VisibilityState.VISIBLE); } this.hidePreviousPages_(index); - this.resumeForgottenPages_(index); + this.resumePausedPages_(index); } else if (page.relativePos === ViewportRelativePos.OUTSIDE_VIEWPORT) { if (page.isVisible()) { page.setVisibility(VisibilityState.HIDDEN); @@ -247,19 +247,19 @@ export class NextPageService { /** * Makes sure that all pages preceding the current page are * marked hidden if they are out of the viewport and additionally - * paused/forgotten if they are too far from the current page + * paused if they are too far from the current page * @param {number} index index of the page to start at - * @param {number=} forgetPageCountForTesting + * @param {number=} pausePageCountForTesting * @return {!Promise} * @private */ - hidePreviousPages_(index, forgetPageCountForTesting) { + hidePreviousPages_(index, pausePageCountForTesting) { // The distance (in pages) to the currently visible page after which // we start unloading pages from memory - const forgetPageCount = - forgetPageCountForTesting === undefined - ? FORGET_PAGE_COUNT - : forgetPageCountForTesting; + const pausePageCount = + pausePageCountForTesting === undefined + ? PAUSE_PAGE_COUNT + : pausePageCountForTesting; const scrollingDown = this.scrollDirection_ === Direction.DOWN; // Hide the host (first) page if needed @@ -287,7 +287,7 @@ export class NextPageService { page.setVisibility(VisibilityState.HIDDEN); } // Pause those that are too far away - if (away >= forgetPageCount) { + if (away >= pausePageCount) { return page.pause(); } }) @@ -296,24 +296,27 @@ export class NextPageService { /** * Makes sure that all pages that are a few pages away from the - * currently visible page are re-inserted (if forgotten) and + * currently visible page are re-inserted (if paused) and * ready to become visible soon * @param {number} index index of the page to start at - * @param {number=} forgetPageCountForTesting + * @param {number=} pausePageCountForTesting * @private */ - resumeForgottenPages_(index, forgetPageCountForTesting) { + resumePausedPages_(index, pausePageCountForTesting) { // The distance (in pages) to the currently visible page after which // we start unloading pages from memory - const forgetPageCount = - forgetPageCountForTesting === undefined - ? FORGET_PAGE_COUNT - : forgetPageCountForTesting; + const pausePageCount = + pausePageCountForTesting === undefined + ? PAUSE_PAGE_COUNT + : pausePageCountForTesting; // Get all the pages that should be resumed const nearViewportPages = this.pages_ .slice(1) // Ignore host page - .slice(index - forgetPageCount - 1, index + forgetPageCount + 1) + .slice( + Math.max(0, index - pausePageCount - 1), + Math.min(this.pages_.length, index + pausePageCount + 1) + ) .filter(page => page.isPaused()); nearViewportPages.forEach(page => page.resume()); @@ -644,7 +647,6 @@ export class NextPageService { // we use initialUrl since the url can get updated if // the page issues a redirect if (this.pages_.some(p => p.initialUrl == page.url)) { - user().warn(TAG, 'Recommendation already queued'); return; } // Queue the page for fetching diff --git a/extensions/amp-next-page/1.0/test/test-amp-next-page.js b/extensions/amp-next-page/1.0/test/test-amp-next-page.js index 896b46162a55..03ac7c82b621 100644 --- a/extensions/amp-next-page/1.0/test/test-amp-next-page.js +++ b/extensions/amp-next-page/1.0/test/test-amp-next-page.js @@ -375,7 +375,7 @@ describes.realWin( await service.hidePreviousPages_( 0 /** index */, - 0 /** forgetPageCountForTesting */ + 0 /** pausePageCountForTesting */ ); // Internally changes the state to paused @@ -415,7 +415,7 @@ describes.realWin( service.scrollDirection_ = Direction.UP; await service.hidePreviousPages_( 0 /** index */, - 0 /** forgetPageCountForTesting */ + 0 /** pausePageCountForTesting */ ); expect(service.pages_[2].state_).to.equal(PageState.PAUSED); expect(service.pages_[2].visibilityState_).to.equal( @@ -423,9 +423,9 @@ describes.realWin( ); service.scrollDirection_ = Direction.DOWN; - await service.resumeForgottenPages_( + await service.resumePausedPages_( 1 /** index */, - 0 /** forgetPageCountForTesting */ + 0 /** pausePageCountForTesting */ ); // Replaces the inserted placeholder with the page's content