Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add visual test for sticky-ad #16829

Closed
wants to merge 2 commits into from
Closed

Add visual test for sticky-ad #16829

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38bbce1
add visual test for sticky-ad
zhouyx Jul 17, 2018
344964d
address comment
zhouyx Jul 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add visual test for sticky-ad
  • Loading branch information
@zhouyx
zhouyx committed Jul 18, 2018
commit 38bbce13b564255192ee8b8752297b22716cc5e3
5 changes: 5 additions & 0 deletions examples/visual-tests/amp-sticky-ad/amp-sticky-ad-wrapper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<iframe id="stickyAd"
width="100%"
height=1000
src="./amp-sticky-ad.amp.html">
</iframe>
169 changes: 169 additions & 0 deletions examples/visual-tests/amp-sticky-ad/amp-sticky-ad.amp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<!doctype html>
<html ⚡>

<head>
<meta charset="utf-8">
<title>amp-sticky-ad</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script>
// Give sticky-ad component a second to build
setTimeout(() => {
window.scroll(0, 100);
// Give 1000ms for ad to load
setTimeout(() => {
const ad = document.getElementsByTagName('amp-ad')[0];
ad.classList.add('ready-for-visual-diff');
}, 1000);
}, 1000);
</script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.amp-sticky-ad-close-button {
min-width: 0;
}
</style>
</head>
<body>
<amp-sticky-ad layout="nodisplay">
<amp-ad
width="320"
height="50"
type="doubleclick"
data-slot="/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>


<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>
</body>
</html>
9 changes: 5 additions & 4 deletions test/visual-diff/visual-tests
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,11 @@
"name": "Video rotate-to-fullscreen",
"loading_complete_css": ["video.i-amphtml-replaced-content"]
},
{
"url": "examples/visual-tests/amp-sticky-ad/amp-sticky-ad-wrapper.html",
"name": "AMP Sticky Ad",
"loading_complete_css": ["ready-for-visual-diff"]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this would not work, because the page that gets tested is the wrapper, and the browser will be looking for the CSS class in that page, not inside the iframe. How about sending a message from inside the iframe to the container document, and have the container document add the ready-for-visual-diff class to the iframe on message receipt?

nit: it should be .ready-for-visual-diff, i.e. preceded by a dot

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah! Good point! Switched to postMessage.

}
/**
* AMP by Example pages go below this.
*/
Expand Down Expand Up @@ -423,10 +428,6 @@
"url": "examples/visual-tests/amp-by-example/components/amp-springboard-player/index.html",
"name": "amp-springboard-player - Amp By Example"
},
{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eh, leave it in place. It doesn't cost us anything and will be automatically re-added next time I run the ABE-copying script :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😄 Reverted

"url": "examples/visual-tests/amp-by-example/components/amp-sticky-ad/index.html",
"name": "amp-sticky-ad - Amp By Example"
},
{
"url": "examples/visual-tests/amp-by-example/components/amp-timeago/index.html",
"name": "amp-timeago - Amp By Example"
Expand Down