+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus + luctus nunc ut elit cursus, et imperdiet diam vehicula. + Duis et nisi sed urna blandit bibendum et sit amet erat. + Suspendisse potenti. Curabitur consequat volutpat arcu nec + elementum. Etiam a turpis ac libero varius condimentum. + Maecenas sollicitudin felis aliquam tortor vulputate, + ac posuere velit semper. +

+ Fusce pretium tempor justo, vitae consequat dolor maximus eget. + Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus + ornare sodales. Nullam id dolor vitae arcu consequat ornare a + et lectus. Sed tempus eget enim eget lobortis. + Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu. + Nullam in libero nisi. +

+ +

+ Sed pharetra semper fringilla. Nulla fringilla, neque eget + varius suscipit, mi turpis congue odio, quis dignissim nisi + nulla at erat. Duis non nibh vel erat vehicula hendrerit eget + vel velit. Donec congue augue magna, nec eleifend dui porttitor + sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus. + Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales + ex. Phasellus ultrices, purus non egestas ullamcorper, felis + lorem ultrices nibh, in tristique mauris justo sed ante. + Nunc commodo purus feugiat metus bibendum consequat. Duis + finibus urna ut ligula auctor, sed vehicula ex aliquam. + Sed sed augue auctor, porta turpis ultrices, cursus diam. + In venenatis aliquet porta. Sed volutpat fermentum quam, + ac molestie nulla porttitor ac. Donec porta risus ut enim + pellentesque, id placerat elit ornare. +

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

+ +

+ + +

+ Fusce pretium tempor justo, vitae consequat dolor maximus eget. +

+ +

+ Cum sociis natoque penatibus et magnis dis parturient montes, + nascetur ridiculus mus. Nulla et viverra turpis. Fusce + viverra enim eget elit blandit, in finibus enim blandit. Integer + fermentum eleifend felis non posuere. In vulputate et metus at + aliquam. Praesent a varius est. Quisque et tincidunt nisi. + Nam porta urna at turpis lacinia, sit amet mattis eros elementum. + Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu. + In molestie sem elit, tincidunt venenatis tortor aliquet sodales. + Ut elementum velit fermentum felis volutpat sodales in non libero. + Aliquam erat volutpat. +

+ +

+ Morbi at velit vitae eros congue congue venenatis non dui. + Sed lacus sem, feugiat sed elementum sed, maximus sed lacus. + Integer accumsan magna in sagittis pharetra. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia + eu in magna. Vestibulum non felis odio. Ut consectetur venenatis + felis aliquet maximus. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos himenaeos. +

- + +

diff --git a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css index 30b77ab32c3d..4f6845645d48 100644 --- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css +++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css @@ -29,6 +29,17 @@ amp-sticky-ad { box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important; } +i-amp-sticky-ad-top-padding { + position: absolute; + top: 0; + left: 0; + right: 0; + background: #fff; + height: 4px; + /** Must be above the dismiss button to cover bottom shadow */ + z-index: 12 !important; +} + .-amp-sticky-ad-layout { display: flex; visibility: hidden !important; @@ -45,6 +56,8 @@ amp-sticky-ad[visible] { .-amp-sticky-ad-layout > amp-ad { display: block; + /*To cover the space of i-amp-sticky-ad-top-padding*/ + margin-top: 4px; } diff --git a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js index d1cb9e2b831a..b79327cc98a2 100644 --- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.js @@ -64,6 +64,10 @@ class AmpStickyAd extends AMP.BaseElement { this.ad_ = children[0]; this.setAsOwner(this.ad_); + const paddingBar = this.win.document.createElement( + 'i-amp-sticky-ad-top-padding'); + this.element.appendChild(paddingBar); + // On viewport scroll, check requirements for amp-stick-ad to display. this.scrollUnlisten_ = this.viewport_.onScroll(() => this.displayAfterScroll_()); From 435d648b6307ac9533bd5d138dfe7322e5aa8a11 Mon Sep 17 00:00:00 2001 From: zhouyx Date: Wed, 2 Nov 2016 15:20:36 -0700 Subject: [PATCH 3/5] fix test --- .../amp-sticky-ad/0.1/test/test-amp-sticky-ad.js | 4 ++-- .../amp-sticky-ad/1.0/test/test-amp-sticky-ad.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js b/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js index d80516ecaaf6..f4eec0cf4f63 100644 --- a/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/0.1/test/test-amp-sticky-ad.js @@ -31,7 +31,7 @@ describes.realWin('amp-sticky-ad 0.1 version', { let win; let ampStickyAd; let impl; - describe('with valid child', () => { + describe('with valid child 0.1', () => { beforeEach(() => { win = env.win; ampStickyAd = win.document.createElement('amp-sticky-ad'); @@ -240,7 +240,7 @@ describes.realWin('amp-sticky-ad 0.1 version', { }); - describe('with unvalid child', () => { + describe('with unvalid child 0.1', () => { let ampImg; let ampAd1; let ampAd2; diff --git a/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js b/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js index f12e374b3bb3..00c099440c7e 100644 --- a/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js @@ -30,7 +30,7 @@ describes.realWin('amp-sticky-ad 1.0 version', { let win; let ampStickyAd; let impl; - describe('with valid child', () => { + describe('with valid child 1.0', () => { beforeEach(() => { win = env.win; ampStickyAd = win.document.createElement('amp-sticky-ad'); @@ -233,7 +233,7 @@ describes.realWin('amp-sticky-ad 1.0 version', { }); - describe('with unvalid child', () => { + describe('with unvalid child 1.0', () => { let ampImg; let ampAd1; let ampAd2; @@ -333,9 +333,9 @@ describes.realWin('amp-sticky-ad 1.0 with real ad child', { return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { let borderWidth = win.getComputedStyle(win.document.body, null) .getPropertyValue('border-bottom-width'); - expect(borderWidth).to.equal('50px'); - expect(impl.element.children[1]).to.be.not.null; - impl.element.children[1].dispatchEvent(new Event('click')); + expect(borderWidth).to.equal('54px'); + expect(impl.element.children[2]).to.be.not.null; + impl.element.children[2].dispatchEvent(new Event('click')); return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { borderWidth = win.getComputedStyle(win.document.body, null) .getPropertyValue('border-bottom-width'); @@ -368,7 +368,7 @@ describes.realWin('amp-sticky-ad 1.0 with real ad child', { return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { let borderWidth = win.getComputedStyle(win.document.body, null) .getPropertyValue('border-bottom-width'); - expect(borderWidth).to.equal('50px'); + expect(borderWidth).to.equal('54px'); impl.collapsedCallback(); return impl.viewport_.ampdoc.whenBodyAvailable().then(() => { borderWidth = win.getComputedStyle(win.document.body, null) From e63c582c17f97e3041b9186f2ded995e9927e763 Mon Sep 17 00:00:00 2001 From: zhouyx Date: Wed, 2 Nov 2016 17:06:05 -0700 Subject: [PATCH 4/5] rebase --- examples/sticky.ads.01.amp.html | 293 ------------------ .../1.0/test/test-amp-sticky-ad.js | 5 +- 2 files changed, 4 insertions(+), 294 deletions(-) delete mode 100644 examples/sticky.ads.01.amp.html diff --git a/examples/sticky.ads.01.amp.html b/examples/sticky.ads.01.amp.html deleted file mode 100644 index 44010285d36a..000000000000 --- a/examples/sticky.ads.01.amp.html +++ /dev/null @@ -1,293 +0,0 @@ - - - - - Codestin Search App - - - - - - - - - - - -

- PublisherLogo -

- - - - - -

- - -

Lorem Ipsum

- September 14, 2015 -

- Fusce pretium tempor justo, vitae consequat dolor maximus eget. -

- -

- - -

- by Lorem Ipsum - - lorem.ipsum@ -

PublisherName News Reporter

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus - luctus nunc ut elit cursus, et imperdiet diam vehicula. - Duis et nisi sed urna blandit bibendum et sit amet erat. - Suspendisse potenti. Curabitur consequat volutpat arcu nec - elementum. Etiam a turpis ac libero varius condimentum. - Maecenas sollicitudin felis aliquam tortor vulputate, - ac posuere velit semper. -

- Fusce pretium tempor justo, vitae consequat dolor maximus eget. - Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus - ornare sodales. Nullam id dolor vitae arcu consequat ornare a - et lectus. Sed tempus eget enim eget lobortis. - Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu. - Nullam in libero nisi. -

- -

- Sed pharetra semper fringilla. Nulla fringilla, neque eget - varius suscipit, mi turpis congue odio, quis dignissim nisi - nulla at erat. Duis non nibh vel erat vehicula hendrerit eget - vel velit. Donec congue augue magna, nec eleifend dui porttitor - sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus. - Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales - ex. Phasellus ultrices, purus non egestas ullamcorper, felis - lorem ultrices nibh, in tristique mauris justo sed ante. - Nunc commodo purus feugiat metus bibendum consequat. Duis - finibus urna ut ligula auctor, sed vehicula ex aliquam. - Sed sed augue auctor, porta turpis ultrices, cursus diam. - In venenatis aliquet porta. Sed volutpat fermentum quam, - ac molestie nulla porttitor ac. Donec porta risus ut enim - pellentesque, id placerat elit ornare. -

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

- -

- - -

- Fusce pretium tempor justo, vitae consequat dolor maximus eget. -

- -

- Cum sociis natoque penatibus et magnis dis parturient montes, - nascetur ridiculus mus. Nulla et viverra turpis. Fusce - viverra enim eget elit blandit, in finibus enim blandit. Integer - fermentum eleifend felis non posuere. In vulputate et metus at - aliquam. Praesent a varius est. Quisque et tincidunt nisi. - Nam porta urna at turpis lacinia, sit amet mattis eros elementum. - Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu. - In molestie sem elit, tincidunt venenatis tortor aliquet sodales. - Ut elementum velit fermentum felis volutpat sodales in non libero. - Aliquam erat volutpat. -

- -

- Morbi at velit vitae eros congue congue venenatis non dui. - Sed lacus sem, feugiat sed elementum sed, maximus sed lacus. - Integer accumsan magna in sagittis pharetra. Class aptent taciti - sociosqu ad litora torquent per conubia nostra, per inceptos - himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia - eu in magna. Vestibulum non felis odio. Ut consectetur venenatis - felis aliquet maximus. Class aptent taciti sociosqu ad litora - torquent per conubia nostra, per inceptos himenaeos. -

- - - - diff --git a/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js b/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js index 00c099440c7e..8a983aecc5ad 100644 --- a/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js +++ b/extensions/amp-sticky-ad/1.0/test/test-amp-sticky-ad.js @@ -188,7 +188,10 @@ describes.realWin('amp-sticky-ad 1.0 version', { impl.displayAfterScroll_(); expect(addCloseButtonSpy).to.be.called; expect(impl.element.children[1]).to.be.not.null; - expect(impl.element.children[1].tagName).to.equal('BUTTON'); + expect(impl.element.children[1].tagName).to.equal( + 'I-AMP-STICKY-AD-TOP-PADDING'); + expect(impl.element.children[2]).to.be.not.null; + expect(impl.element.children[2].tagName).to.equal('BUTTON'); }); it('should listen to amp:built, amp:load:end', () => { From 38a39138875d0a92c98e3a017b609bd06cb3b135 Mon Sep 17 00:00:00 2001 From: zhouyx Date: Wed, 2 Nov 2016 17:30:20 -0700 Subject: [PATCH 5/5] fix z-index --- css/Z_INDEX.md | 9 +++++---- examples/sticky.ads.amp.html | 9 +++------ extensions/amp-app-banner/0.1/amp-app-banner.css | 6 +++--- extensions/amp-sticky-ad/1.0/amp-sticky-ad.css | 2 +- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md index 18da9084b339..c235e1c24613 100644 --- a/css/Z_INDEX.md +++ b/css/Z_INDEX.md @@ -9,10 +9,11 @@ selector | z-index | file .-amp-element > [overflow] | 2 | css/amp.css .-amp-image-lightbox-caption | 2 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css .amp-carousel-button | 10 | extensions/amp-carousel/0.1/amp-carousel.css -amp-sticky-ad | 11 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css -amp-app-banner | 12 | extensions/amp-app-banner/0.1/amp-app-banner.css -.amp-app-banner-dismiss-button | 13 | extensions/amp-app-banner/0.1/amp-app-banner.css -i-amp-app-banner-top-padding | 14 | extensions/amp-app-banner/0.1/amp-app-banner.css +amp-sticky-ad | 11 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css +i-amp-sticky-ad-top-padding | 12 | extensions/amp-sticky-ad/0.1/amp-sticky-ad.css +amp-app-banner | 13 | extensions/amp-app-banner/0.1/amp-app-banner.css +.amp-app-banner-dismiss-button | 14 | extensions/amp-app-banner/0.1/amp-app-banner.css +i-amp-app-banner-top-padding | 15 | extensions/amp-app-banner/0.1/amp-app-banner.css amp-image-lightbox | 1000 | extensions/amp-image-lightbox/0.1/amp-image-lightbox.css amp-live-list > [update] | 1000 | extensions/amp-live-list/0.1/amp-live-list.css amp-user-notification | 1000 | extensions/amp-user-notification/0.1/amp-user-notification.css diff --git a/examples/sticky.ads.amp.html b/examples/sticky.ads.amp.html index 52cada7bb93c..e0395c2f7871 100644 --- a/examples/sticky.ads.amp.html +++ b/examples/sticky.ads.amp.html @@ -159,12 +159,9 @@

- -

+ diff --git a/extensions/amp-app-banner/0.1/amp-app-banner.css b/extensions/amp-app-banner/0.1/amp-app-banner.css index d7bce883a66f..26dfdb6aaa81 100644 --- a/extensions/amp-app-banner/0.1/amp-app-banner.css +++ b/extensions/amp-app-banner/0.1/amp-app-banner.css @@ -22,7 +22,7 @@ amp-app-banner { max-height: 100px !important; box-sizing: border-box; background: #fff; - z-index: 12 !important; + z-index: 13 !important; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important; } @@ -34,7 +34,7 @@ i-amp-app-banner-top-padding { background: #fff; height: 4px; /** Must be above the dismiss button to cover bottom shadow */ - z-index: 14 !important; + z-index: 15 !important; } .amp-app-banner-dismiss-button { @@ -48,7 +48,7 @@ i-amp-app-banner-top-padding { background-position: 9px center; background-color: #fff; background-repeat: no-repeat; - z-index: 13 !important; + z-index: 14 !important; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2); border: none; border-top-left-radius: 12px; diff --git a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css index 4f6845645d48..6e23c10eeb4f 100644 --- a/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css +++ b/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css @@ -20,7 +20,7 @@ amp-sticky-ad { bottom: 0 !important; left: 0; width: 100% !important; - z-index: 11; + z-index: 11 !important; max-height: 100px !important; box-sizing: border-box; opacity: 1 !important;