diff --git a/build-system/test-configs/config.js b/build-system/test-configs/config.js index 52d9136e58da..fb8c677979ed 100644 --- a/build-system/test-configs/config.js +++ b/build-system/test-configs/config.js @@ -438,10 +438,10 @@ const htmlFixtureGlobs = [ '!examples/visual-tests/amp-story/amp-story-grid-layer-template-horizontal.html', '!examples/visual-tests/amp-story/amp-story-grid-layer-template-thirds.html', '!examples/visual-tests/amp-story/amp-story-grid-layer-template-vertical.html', - '!examples/visual-tests/amp-story/amp-story-inline-page-attachment-dark-theme.html', '!examples/visual-tests/amp-story/amp-story-interactive-quiz-sizing-positioning.html', '!examples/visual-tests/amp-story/amp-story-landscape-templates.html', '!examples/visual-tests/amp-story/amp-story-page-attachment.html', + '!examples/visual-tests/amp-story/amp-story-page-attachment-v2.html', '!examples/visual-tests/amp-story/amp-story-sidebar.html', '!examples/visual-tests/amp-story/amp-story-tooltip.html', '!examples/visual-tests/amp-story/amp-story-unsupported-browser-layer.html', diff --git a/examples/visual-tests/amp-story/amp-story-inline-page-attachment-dark-theme.html b/examples/visual-tests/amp-story/amp-story-inline-page-attachment-dark-theme.html deleted file mode 100644 index fca4d18dfcf6..000000000000 --- a/examples/visual-tests/amp-story/amp-story-inline-page-attachment-dark-theme.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - Attachments - - - - - - - - - - - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit -

- - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit

- Lorem ipsum dolor sit amet, consectetur adipiscing elit - - - - - diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html new file mode 100644 index 000000000000..6bdf96efdeb5 --- /dev/null +++ b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html @@ -0,0 +1,189 @@ + + + + + + + + + AMP Story page attachment + + + + + + + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment-v2.js b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.js new file mode 100644 index 000000000000..afce5e45bc93 --- /dev/null +++ b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.js @@ -0,0 +1,178 @@ +/** + * Copyright 2019 The AMP HTML Authors. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS-IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +'use strict'; + +const { + verifySelectorsVisible, +} = require('../../../build-system/tasks/visual-diff/helpers'); + +module.exports = { + 'custom text - inline CTA pre-tap UI should display': async (page, name) => { + const pageID = 'inline-custom-text'; + 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]', + ]); + }, + + 'dark theme - inline CTA pre-tap UI should display': async (page, name) => { + const pageID = 'inline-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]', + ]); + }, + + '1 img - dark theme - inline CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'inline-dark-theme-1-image'; + 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]', + ]); + }, + + '2 imgs - dark theme - inline CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'inline-dark-theme-2-images'; + 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]', + ]); + }, + + '2 imgs - light theme - inline CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'inline-light-theme-2-images'; + 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]', + ]); + }, + + 'outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-default'; + 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]', + ]); + }, + + 'custom text - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-custom-text'; + 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]', + ]); + }, + + 'no img - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-no-image'; + 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]', + ]); + }, + + 'custom img - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-custom-image'; + 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]', + ]); + }, + + 'dark theme - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-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]', + ]); + }, + + 'pink background - outlink CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'outlink-custom-background-color'; + 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]', + ]); + }, + + 'pink text - outlink CTA pre-tap UI should display': async (page, name) => { + const url = await page.url(); + const pageID = 'outlink-custom-text-color'; + 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]', + ]); + }, +}; diff --git a/extensions/amp-story/1.0/amp-story-open-page-attachment.css b/extensions/amp-story/1.0/amp-story-open-page-attachment.css index b011d2abebec..707f5f3f48e8 100644 --- a/extensions/amp-story/1.0/amp-story-open-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-open-page-attachment.css @@ -411,7 +411,7 @@ } .i-amphtml-story-page-open-attachment-link-icon { - width: 24px; - height: 24px; + width: 24px !important; + height: 24px !important; fill: var(--i-amphtml-outlink-cta-text-color) !important; } diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.css b/extensions/amp-story/1.0/amp-story-page-attachment.css index a7d7c4a0c505..f8ca72a7e887 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-page-attachment.css @@ -114,8 +114,8 @@ amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-pa background: var(--i-amphtml-outlink-cta-background-color) !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-img, -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-link-icon { +.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-content .i-amphtml-story-page-attachment-remote-img, +.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-content .i-amphtml-story-page-open-attachment-link-icon { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js index d2f173e7cfe7..268e43df9129 100644 --- a/extensions/amp-story/1.0/amp-story-page.js +++ b/extensions/amp-story/1.0/amp-story-page.js @@ -1804,6 +1804,12 @@ export class AmpStoryPage extends AMP.BaseElement { attachmentEl ); + // This ensures `active` is set on first render. + // Otherwise setState may be called before this.openAttachmentEl_ exists. + if (this.element.hasAttribute('active')) { + this.openAttachmentEl_.setAttribute('active', ''); + } + const container = this.win.document.createElement('div'); container.classList.add('i-amphtml-story-page-open-attachment-host'); container.setAttribute('role', 'button'); diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests index 2b5cf7c732c5..0320dbe0f8c5 100644 --- a/test/visual-diff/visual-tests +++ b/test/visual-diff/visual-tests @@ -844,15 +844,22 @@ "loading_complete_selectors": [".i-amphtml-story-360-loaded"] }, { - "url": "examples/visual-tests/amp-story/amp-story-inline-page-attachment-dark-theme.html", - "name": "amp-story-inline-page-attachment-dark-theme: displays new inline CTA button with dark theme", + "url": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.html", + "name": "amp-story-page-attachment-v2: new inline & outlink CTA buttons", "viewport": {"width": 320, "height": 480}, "loading_complete_selectors": [ ".i-amphtml-story-loaded", - "amp-story-page#cover[active]" ], - // for page navigation - "loading_complete_delay_ms": 500 + "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.js" + }, + { + "url": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.html", + "name": "amp-story-page-attachment-v2: page attachment desktop", + "viewport": {"width": 1440, "height": 900}, + "loading_complete_selectors": [ + ".i-amphtml-story-loaded", + ], + "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.js" } ] }