From 2c60f47818283f99e6af2cf62ada78bdb04e484b Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Wed, 18 Dec 2019 22:15:01 -0800 Subject: [PATCH 01/20] 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/20] 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/20] 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/20] 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/20] 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/20] 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/20] 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/20] 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/20] 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/20] 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 6a55cff6a6ec45f2299741251ff8cc4d0f4942a0 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Mon, 20 Jan 2020 10:56:40 -0800 Subject: [PATCH 13/20] Implemented a default separator pill and templating for the separator --- .../amp-next-page/1.0/amp-next-page.css | 31 ++++++- extensions/amp-next-page/1.0/page.js | 2 +- extensions/amp-next-page/1.0/service.js | 83 +++++++++++++------ .../amp-next-page-v1.element-visibility.html | 10 +-- .../amp-next-page/1.0/amp-next-page.amp.html | 30 ++++++- .../1.0/amp-next-page.element-visibility.html | 10 +-- .../1.0/articles/element-visibility-1.html | 6 +- .../1.0/articles/element-visibility-2.html | 6 +- 8 files changed, 129 insertions(+), 49 deletions(-) diff --git a/extensions/amp-next-page/1.0/amp-next-page.css b/extensions/amp-next-page/1.0/amp-next-page.css index 5368d0f8755d..70fccd11df3c 100644 --- a/extensions/amp-next-page/1.0/amp-next-page.css +++ b/extensions/amp-next-page/1.0/amp-next-page.css @@ -18,16 +18,41 @@ overflow: hidden; } -.i-amphtml-next-page-document:not(.amp-next-page-document-visible) - [i-amphtml-fixedid] { +.i-amphtml-next-page-document:not(.next-page-visible) [i-amphtml-fixedid] { display: none; } -.i-amphtml-next-page-document.amp-next-page-document-visible { +.i-amphtml-next-page-document.next-page-visible { opacity: 1; overflow: visible; } +/** Fixes collapsing margins when switching between the visible and hidden states */ +.i-amphtml-next-page-document:before, +.i-amphtml-next-page-document:after { + content: ' '; + display: table; +} + .i-amphtml-next-page-placeholder { background: #eee; } + +.amp-next-page-default-separator { + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + text-align: center; + font-family: 'Roboto', Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 14px; + width: 160px; + height: 38px; + margin: auto; + border-radius: 32px; + box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.09); + background: black; + color: white; +} diff --git a/extensions/amp-next-page/1.0/page.js b/extensions/amp-next-page/1.0/page.js index 61d6fa36f3bd..67db6cd705b1 100644 --- a/extensions/amp-next-page/1.0/page.js +++ b/extensions/amp-next-page/1.0/page.js @@ -30,7 +30,7 @@ export const PageState = { PAUSED: 5, }; -const VISIBLE_DOC_CLASS = 'amp-next-page-document-visible'; +const VISIBLE_DOC_CLASS = 'next-page-visible'; export class Page { /** diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js index 15aad26e701d..931966bd55b4 100644 --- a/extensions/amp-next-page/1.0/service.js +++ b/extensions/amp-next-page/1.0/service.js @@ -23,11 +23,13 @@ import { childElementByAttr, childElementsByTag, isJsonScriptTag, + removeChildren, removeElement, scopedQuerySelector, } from '../../../src/dom'; import {dev, devAssert, user, userAssert} from '../../../src/log'; import {escapeCssSelectorIdent} from '../../../src/css'; +import {htmlFor} from '../../../src/static-template'; import {installStylesForDoc} from '../../../src/style-installer'; import { parseFavicon, @@ -77,6 +79,9 @@ export class NextPageService { */ this.mutator_ = Services.mutatorForDoc(ampdoc); + /** @private @const {!../../../src/service/template-impl.Templates} */ + this.templates_ = Services.templatesFor(this.win_); + /** @private {?Element} */ this.separator_ = null; @@ -383,13 +388,16 @@ export class NextPageService { const container = this.win_.document.createElement('div'); container.classList.add(DOC_CONTAINER_CLASS); + // Insert the separator + const separatorInstance = this.separator_.cloneNode(true); + container.appendChild(separatorInstance); + this.maybeRenderSeparatorTemplate_(separatorInstance, page); + + // Insert the document const shadowRoot = this.win_.document.createElement('div'); shadowRoot.classList.add(SHADOW_ROOT_CLASS); container.appendChild(shadowRoot); - // Insert the separator - container.appendChild(this.separator_.cloneNode(true)); - // Insert the container this.element_.insertBefore(container, this.moreBox_); @@ -416,7 +424,7 @@ export class NextPageService { */ attachDocumentToPage(page, content, force = false) { // If the user already scrolled to the bottom, prevent rendering - if (this.getViewportsAway_() <= NEAR_BOTTOM_VIEWPORT_COUNT && !force) { + if (this.getViewportsAway_() < NEAR_BOTTOM_VIEWPORT_COUNT && !force) { // TODO(wassgha): Append a "load next article" button? return null; } @@ -533,15 +541,15 @@ export class NextPageService { } /** - * Hides or shows elements based on the `amp-next-page-hide` and - * `amp-next-page-replace` attributes + * Hides or shows elements based on the `next-page-hide` and + * `next-page-replace` attributes * @param {!Document|!ShadowRoot} doc Document of interest * @param {boolean=} isVisible Whether this page is visible or not */ toggleHiddenAndReplaceableElements(doc, isVisible = true) { - // Hide elements that have [amp-next-page-hide] on child documents + // Hide elements that have [next-page-hide] on child documents if (doc !== this.hostPage_.document) { - toArray(doc.querySelectorAll('[amp-next-page-hide]')).forEach(element => + toArray(doc.querySelectorAll('[next-page-hide]')).forEach(element => toggle(element, false /** opt_display */) ); } @@ -551,14 +559,14 @@ export class NextPageService { return; } - // Replace elements that have [amp-next-page-replace] + // Replace elements that have [next-page-replace] toArray( - doc.querySelectorAll('*:not(amp-next-page) [amp-next-page-replace]') + doc.querySelectorAll('*:not(amp-next-page) [next-page-replace]') ).forEach(element => { - let uniqueId = element.getAttribute('amp-next-page-replace'); + let uniqueId = element.getAttribute('next-page-replace'); if (!uniqueId) { uniqueId = String(Date.now() + Math.floor(Math.random() * 100)); - element.setAttribute('amp-next-page-replace', uniqueId); + element.setAttribute('next-page-replace', uniqueId); } if ( @@ -725,11 +733,7 @@ export class NextPageService { * @private */ getSeparatorElement_(element) { - const providedSeparator = childElementByAttr( - element, - 'amp-next-page-separator' - ); - // TODO(wassgha): Use templates (amp-mustache) to render the separator + const providedSeparator = childElementByAttr(element, 'separator'); if (providedSeparator) { removeElement(providedSeparator); } @@ -741,9 +745,41 @@ export class NextPageService { * @private */ buildDefaultSeparator_() { - const separator = this.win_.document.createElement('div'); - separator.classList.add('amp-next-page-separator'); - return separator; + const html = htmlFor(this.element_); + return html` +
+ Next article +
+ `; + } + + /** + * Renders the template inside the separator element using + * data from the current article (if a template is present) + * + * @param {!Element} separator + * @param {!Page} page + * @return {!Promise} + */ + maybeRenderSeparatorTemplate_(separator, page) { + if (!this.templates_.hasTemplate(separator)) { + return Promise.resolve(); + } + this.templates_ + .findAndRenderTemplate(separator, { + title: page.title, + url: page.url, + image: page.image, + }) + .then(rendered => { + return this.mutator_.mutateElement(separator, () => { + removeChildren(dev().assertElement(separator)); + separator.appendChild(rendered); + }); + }); } /** @@ -752,10 +788,7 @@ export class NextPageService { * @private */ getMoreBoxElement_(element) { - const providedMoreBox = childElementByAttr( - element, - 'amp-next-page-more-box' - ); + const providedMoreBox = childElementByAttr(element, 'more-box'); // TODO(wassgha): Use templates (amp-mustache) to render the more box if (providedMoreBox) { removeElement(providedMoreBox); @@ -770,7 +803,7 @@ export class NextPageService { buildDefaultMoreBox_() { // TODO(wassgha): Better default more box const moreBox = this.win_.document.createElement('div'); - moreBox.classList.add('amp-next-page-more-box'); + moreBox.classList.add('amp-next-page-default-more-box'); return moreBox; } } diff --git a/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html b/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html index 61043240fa63..46da3553f2b4 100644 --- a/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html +++ b/test/manual/amp-next-page/1.0/amp-next-page-v1.element-visibility.html @@ -62,7 +62,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.

- +

Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. @@ -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 @@ -306,10 +306,10 @@

Content discovery

] } -
+
Read more
-
+
Here are a few more articles ...
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.amp.html b/test/manual/amp-next-page/1.0/amp-next-page.amp.html index 586fd4d6d365..556b39ee868f 100644 --- a/test/manual/amp-next-page/1.0/amp-next-page.amp.html +++ b/test/manual/amp-next-page/1.0/amp-next-page.amp.html @@ -9,6 +9,7 @@ + -
- Read more +
+
-
+
Here are a few more articles ...
diff --git a/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html b/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html index f28ad3ff02a1..88367f4ec1ec 100644 --- a/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html +++ b/test/manual/amp-next-page/1.0/amp-next-page.element-visibility.html @@ -61,7 +61,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.

- +

Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. @@ -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 @@ -300,10 +300,10 @@

Content discovery

} ] -
+
Read more
-
+
Here are a few more articles ...
diff --git a/test/manual/amp-next-page/1.0/articles/element-visibility-1.html b/test/manual/amp-next-page/1.0/articles/element-visibility-1.html index 05fde086375b..e1bc7ea29a7e 100644 --- a/test/manual/amp-next-page/1.0/articles/element-visibility-1.html +++ b/test/manual/amp-next-page/1.0/articles/element-visibility-1.html @@ -55,7 +55,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.

- +

Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. @@ -70,8 +70,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/1.0/articles/element-visibility-2.html b/test/manual/amp-next-page/1.0/articles/element-visibility-2.html index 5dd22b3e3801..e9180fa9b83d 100644 --- a/test/manual/amp-next-page/1.0/articles/element-visibility-2.html +++ b/test/manual/amp-next-page/1.0/articles/element-visibility-2.html @@ -55,7 +55,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.

- +

Vestibulum a nisi est. Fusce consequat iaculis vehicula. Aliquam luctus nunc risus, ut congue augue tristique nec. In venenatis aliquam tristique. @@ -70,8 +70,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 5bf5fd626025a3f649c1e0c104cb3b9e9f43bcfd Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Tue, 21 Jan 2020 15:41:54 -0800 Subject: [PATCH 14/20] Types fix --- .../amp-next-page/1.0/amp-next-page.css | 2 +- extensions/amp-next-page/1.0/page.js | 6 +++++- extensions/amp-next-page/1.0/service.js | 19 +++++++++++-------- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/extensions/amp-next-page/1.0/amp-next-page.css b/extensions/amp-next-page/1.0/amp-next-page.css index 70fccd11df3c..11a2a8a7ea7f 100644 --- a/extensions/amp-next-page/1.0/amp-next-page.css +++ b/extensions/amp-next-page/1.0/amp-next-page.css @@ -55,4 +55,4 @@ box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.09); background: black; color: white; -} +} \ No newline at end of file diff --git a/extensions/amp-next-page/1.0/page.js b/extensions/amp-next-page/1.0/page.js index 67db6cd705b1..917bc841fe27 100644 --- a/extensions/amp-next-page/1.0/page.js +++ b/extensions/amp-next-page/1.0/page.js @@ -30,7 +30,8 @@ export const PageState = { PAUSED: 5, }; -const VISIBLE_DOC_CLASS = 'next-page-visible'; +export const VISIBLE_DOC_CLASS = 'amp-next-page-visible'; +export const HIDDEN_DOC_CLASS = 'amp-next-page-hidden'; export class Page { /** @@ -160,6 +161,9 @@ export class Page { this.shadowDoc_.ampdoc .getBody() .classList.toggle(VISIBLE_DOC_CLASS, this.isVisible()); + this.shadowDoc_.ampdoc + .getBody() + .classList.toggle(HIDDEN_DOC_CLASS, !this.isVisible()); } if (this.isVisible()) { diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js index 931966bd55b4..7e894f6e8e58 100644 --- a/extensions/amp-next-page/1.0/service.js +++ b/extensions/amp-next-page/1.0/service.js @@ -15,7 +15,7 @@ */ import {CSS} from '../../../build/amp-next-page-1.0.css'; -import {HostPage, Page, PageState} from './page'; +import {HIDDEN_DOC_CLASS, HostPage, Page, PageState} from './page'; import {MultidocManager} from '../../../src/multidoc-manager'; import {Services} from '../../../src/services'; import {VisibilityState} from '../../../src/visibility-state'; @@ -536,6 +536,8 @@ export class NextPageService { removeElement(el); }); + doc.body.classList.add(HIDDEN_DOC_CLASS); + // Make sure all hidden elements are initially invisible this.toggleHiddenAndReplaceableElements(doc, false /** isVisible */); } @@ -745,7 +747,7 @@ export class NextPageService { * @private */ buildDefaultSeparator_() { - const html = htmlFor(this.element_); + const html = htmlFor(this.getHostNextPageElement_()); return html`

{ return this.mutator_.mutateElement(separator, () => { removeChildren(dev().assertElement(separator)); From 2f19d1834c87a0afc0af3f3f40fbf1665951c3e1 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Thu, 23 Jan 2020 08:28:01 -0800 Subject: [PATCH 15/20] Fix tests for renaming --- extensions/amp-next-page/1.0/test/test-amp-next-page.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 9b3178b6af93..7c7d4fb60e5f 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 @@ -301,7 +301,7 @@ describes.realWin( env.fetchMock.get( /\/document1/, - `${MOCK_NEXT_PAGE}
` + `${MOCK_NEXT_PAGE}
` ); await service.maybeFetchNext(); @@ -315,14 +315,14 @@ describes.realWin( env.fetchMock.get( /\/document1/, - `${MOCK_NEXT_PAGE}
` + `${MOCK_NEXT_PAGE}
` ); await service.maybeFetchNext(); service.pages_[1].setVisibility(VisibilityState.VISIBLE); env.fetchMock.get( /\/document2/, - `${MOCK_NEXT_PAGE}
` + `${MOCK_NEXT_PAGE}
` ); await service.maybeFetchNext(); service.pages_[1].relativePos = ViewportRelativePos.INSIDE_VIEWPORT; From 2c1a9aa41991e5efecc7daaa5db8425c8c581fea Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Thu, 23 Jan 2020 15:18:46 -0800 Subject: [PATCH 16/20] Added unit tests for separators --- extensions/amp-next-page/1.0/page.js | 17 +- extensions/amp-next-page/1.0/service.js | 49 ++-- .../1.0/test/test-amp-next-page.js | 229 ++++++++++++++---- 3 files changed, 223 insertions(+), 72 deletions(-) diff --git a/extensions/amp-next-page/1.0/page.js b/extensions/amp-next-page/1.0/page.js index c70d2a7c0425..36d5eab1911f 100644 --- a/extensions/amp-next-page/1.0/page.js +++ b/extensions/amp-next-page/1.0/page.js @@ -193,7 +193,7 @@ export class Page { * root has been removed */ resume() { - this.attach_(devAssert(this.cachedContent_)); + this.attach_(); } /** @@ -234,13 +234,14 @@ export class Page { .fetchPageDocument(this) .then(content => { this.state_ = PageState.LOADED; - this.container_ = this.manager_.createDocumentContainerForPage( - this /** page */ - ); + this.cachedContent_ = content; + return this.manager_.createDocumentContainerForPage(this /** page */); + }) + .then(container => { + this.container_ = container; // TODO(wassgha): To further optimize, this should ideally // be parsed from the service worker instead of stored in memory - this.cachedContent_ = content; - this.attach_(content); + this.attach_(); }) .catch(() => { this.state_ = PageState.FAILED; @@ -251,9 +252,9 @@ export class Page { /** * Inserts the fetched (or cached) HTML as the document's content - * @param {!Document} content + * @param {!Document=} content */ - attach_(content) { + attach_(content = devAssert(this.cachedContent_)) { const shadowDoc = this.manager_.attachDocumentToPage( this /** page */, content, diff --git a/extensions/amp-next-page/1.0/service.js b/extensions/amp-next-page/1.0/service.js index ba5dc17e0186..90fb0a3e69c4 100644 --- a/extensions/amp-next-page/1.0/service.js +++ b/extensions/amp-next-page/1.0/service.js @@ -385,36 +385,37 @@ export class NextPageService { * Create a container element for the document and insert it into * the amp-next-page element * @param {!Page} page - * @return {!Element} + * @return {!Promise} */ createDocumentContainerForPage(page) { const container = this.win_.document.createElement('div'); container.classList.add(DOC_CONTAINER_CLASS); + this.element_.insertBefore(container, this.moreBox_); // Insert the separator const separatorInstance = this.separator_.cloneNode(true); container.appendChild(separatorInstance); - this.maybeRenderSeparatorTemplate_(separatorInstance, page); - - // Insert the document - const shadowRoot = this.win_.document.createElement('div'); - shadowRoot.classList.add(SHADOW_ROOT_CLASS); - container.appendChild(shadowRoot); - - // Insert the container - this.element_.insertBefore(container, this.moreBox_); + // TODO(wassgha): If async/wait was allowed, this would look a lot nicer! + return this.maybeRenderSeparatorTemplate_(separatorInstance, page).then( + () => { + // Insert the document + const shadowRoot = this.win_.document.createElement('div'); + shadowRoot.classList.add(SHADOW_ROOT_CLASS); + container.appendChild(shadowRoot); + + // Observe this page's visibility + this.visibilityObserver_.observe( + shadowRoot /** element */, + container /** parent */, + position => { + page.relativePos = position; + this.updateVisibility(); + } + ); - // Observe this page's visibility - this.visibilityObserver_.observe( - shadowRoot /** element */, - container /** parent */, - position => { - page.relativePos = position; - this.updateVisibility(); + return container; } ); - - return container; } /** @@ -722,11 +723,17 @@ export class NextPageService { 'be inside a + + + + + + + +
+

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. +

+
+ + + +
+ +
+
+ Here are a few more articles ... +
+ + +