forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Render page level CTA when amp-story-shopping-attachment exists (am…
…pproject#36721) * Add shopping attachment to list of attachment elements with CTA UI. * Add visual test * Remove whitespace * Use amp-story-draggable-drawer-root * Add dark theme page to example. * Update ID * use shopping attachment. * remove empty space * Update diff path.
- Loading branch information
1 parent
38c5634
commit 111a668
Showing
5 changed files
with
83 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!doctype html> | ||
| <html amp lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> | ||
| <script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script> | ||
| <title>AMP Story Shopping</title> | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link rel="canonical" href="index.html"> | ||
| <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> | ||
| .i-amphtml-story-spinner-container { | ||
| /* Hide the spinner for loading pages, since this causes flakes */ | ||
| display: none; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <amp-story standalone publisher="AMP Team" title="Visual Diff Test" | ||
| publisher-logo-src="/examples/visual-tests/photos/120.png" | ||
| poster-portrait-src="/examples/visual-tests/picsum.photos/image981_900x1600.jpg" | ||
| poster-landscape-src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" | ||
| poster-square-src="/examples/visual-tests/picsum.photos/image981_1600x1600.jpg" | ||
| supports-landscape> | ||
| <amp-story-page id="default"> | ||
| <amp-story-shopping-config layout='nodisplay'></amp-story-shopping-config> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag></amp-story-shopping-tag> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment layout='nodisplay'></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
|
|
||
| <amp-story-page id="dark-theme"> | ||
| <amp-story-shopping-config layout='nodisplay'></amp-story-shopping-config> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag></amp-story-shopping-tag> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment layout='nodisplay' theme="dark"></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
| </amp-story> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| 'use strict'; | ||
|
|
||
| const { | ||
| verifySelectorsVisible, | ||
| } = require('../../../build-system/tasks/visual-diff/verifiers'); | ||
|
|
||
| module.exports = { | ||
| 'dark theme - shopping CTA UI should display': async (page, name) => { | ||
| const pageID = 'dark-theme'; | ||
| const url = await page.url(); | ||
| await page.goto(`${url}#page=${pageID}`); | ||
| await page.waitForSelector( | ||
| `amp-story-page#${pageID}[active][distance="0"]` | ||
| ); | ||
| await verifySelectorsVisible(page, name, [ | ||
| '.i-amphtml-story-page-open-attachment[active]', | ||
| ]); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters