ampproject/amphtml

The AMP web component framework.

AMP ⚡

⚡⚡⚡

Tooling

AMP is a web component framework for easily creating user-first websites, stories, ads, emails and more.

AMP is an open source project, and we'd love your help making it better!

Want to know more about AMP?

• amp.dev is the best place to learn more about AMP--and of course the site is made using AMP!
• For developers using AMP, amp.dev includes
  • guides and tutorials
  • examples
  • reference docs
  • example templates
  • tools to make using AMP easier

Having a problem using AMP?

• The amp.dev Support page has resources for getting help.
• Use Stack Overflow to ask questions about using AMP and find answers to questions others have asked.
• Let us know about bugs, and file feature requests to suggest improvements.
• AMP accepts responsible security disclosures through the Google Application Security program.

Want to help make AMP better?

• docs/contributing.md has information on how you can help improve AMP, including ongoing participation through Slack, weekly design reviews, etc.
• We strongly encourage code contributions!
• We enthusiastically welcome new contributors to AMP even if you have no experience being part of an open source project. We've made it easy to get started contributing.
• Consider joining one of AMP's Working Groups, where most of the day-to-day work in AMP gets done.

Other useful information

• AMP's release documentation provides details on how and when AMP releases new versions, including how to know when a change is live in a release.
• AMP's roadmap provides details on some of the significant projects we are working on.
• The AMP meta repository has information about the AMP open source project, including AMP's governance.
• AMP's code of conduct documents how all members, committers and volunteers in the community are required to act. AMP strives for a positive and growing project community that provides a safe environment for everyone.

amphtml's Issues

Should an < amp-lightbox > block the scrolling of the background content when open?

Confirm readyState in BaseElement is needed or remove otherwise.

Connect lightbox to history service

Resources: split main pass into two: complete pass and queue-only pass

A lot of work can be avoided if we know that no layout/viewport info has changed.

LICENSE file was affected by search and replace

want to make sure this wasn't intentional 😮

Support playing videos in amp-anim

It is often more efficient to play a video than an actual GIF.

We should support the ability to provide a video src. Videos would for now never auto play. Also we should make sure that only ever one video is in play mode.

CC @dvoytenko @tjsavage

amp-pixel automatically assign default layout.

Add commit hooks

Commit hook for DO NOT SUBMIT
console.log/error, etc.
Tests passing (Can use travis CI when we are public).

Switch placeholder for amp-video to poster

Or decide the opposite.

From Taylor:
Poster would certainly be simpler/more platform aligned. The initial reasoning was to allow for more flexibility - if the author wanted to include anything more complex than an image, like a fancy splash screen with a custom play overlay that changed on hover, for example.

But certainly in favor of narrowing scope in the preview for this one and any others.

Implement infrastructure for golden file pixel-diff rendering tests

@dvoytenko hacked something up based on phantom.

We should make this so that you can easily add samples and confirm that rendering stays the same as you make changes (with the option to approve diffs, of course)

Turn off logging in automated tests by default

They make the output unreadable.

Discuss: Link protocol required in anchor tags.

The spec says about links:
Links must be relative, protocol relative or use the schemas HTTP or HTTPS.
After thinking about it some more, we should allow all protocols except those which mess with the page that's being displayed (javascript: - anything else?). Reason for allowing the others is that some links go to / open native apps, and users may want that. E.g., a link may open the mail app or some other app. In other words, for these other protocols the act of clicking is still a navigation, more like http / https, and is quite different from the javascript: protocol.
PS: Yes I understand it's also a selfish request because the validator already behaves like this. A change to the validator to make it match the spec is easy to do, but perhaps the status quo is actually better. Thanks for considering.

Improve developer mode detection in AMP runtime.

QUICK DESCRIPTION:

When loading an AMP HTML file (attached) locally with Chrome the tags report the following error:

"...connection attempt to ads.localhost was rejected..."
GET http://ads.localhost/ads/v0.html net::ERR_CONNECTION_REFUSED

This comes from the AMP runtime (https://www.gstatic.com/amphtml/v0.js):

---

return"localhost"!=e.location.hostname&&e.location.hostname||(t="http://ads.localhost:"+e.location.port+"/ads/v0.html"),t}Object.defineProperty(n,"__esModule",{value:!0})

---

It appears that I need to load the file from a host. When I host the AMP HTML sample file on...
www.googledrive.com/host/0B2EN3x884QPPMUc1eVZscFRIeDg
...both the and tags appear to work using Safari, though the appear to fail on Chrome.

STEPS TO REPRODUCE:

1. Open the attached amp.html from the file system in the Chrome browser.

EXPECTED RESULTS:
All frames should load with content.

OBSERVED RESULTS:
See attached screenshots (pieter-amp-ad-js-failed-1.png & pieter-amp-ad-js-failed-2.png).
The ad frames do not load with valid content.

RESOLUTION:
Works fine when the file is hosted. See: www.googledrive.com/host/0B2EN3x884QPPMUc1eVZscFRIeDg

A more convenient temp host location:
https://jsbin.com/detuniticu
https://jsbin.com/detuniticu/edit?html,console,output

amp-pixel breaks the page

Git pulled on 10 sept 2015
By adding an < amp-pixel src="https://....." > the page turns blank. I'm getting the following error in Chrome's console
Uncaught Error: Layout not supported for: container
ElementProto.firstAttachedCallback_ @ viewport.js:45
ElementProto.attachedCallback @ viewport.js:22
Regards
Enrico Canardi

Provide utilities to help components to resolve risk conditions between layout and viewport events

Currently it's left up to the component to resolve states between "layout" and "viewport" events and it's too easy to introduce a risk condition. In an example, amp-anim autoplays GIF when it enters viewport, but it needs to make sure that the image is ready. It's not too hard to implement it fully, but perhaps this can be made simpler.

amp-pixel / ads / iframes: ensure they it's not triggered on preload

Should probably be managed through special priority

Improve display of components in error state

We need to unify how we do this.

The idea to show it in the DOM (at least in dev mode is great), but needs to go through a common API and should also work for asserts.

Would also be nice if our logger would take an element and one could inspect what was logged for an element.

@dvoytenko

Update spec to document on attribute, remove amp-on

Support <source> children in <amp-video>

To allow for format selection based on client capabilities.

Add https enforcement to amp-video

Create great looking example pages

This is just a ticket for what we discussed. Based on Ed's neutral designs with some public domain images, etc.

<amp-video> broken with responsive layout

TypeError: u.maybeApplyResponsivenessToItem is not a function.

CC @dvoytenko

Resources: experiment using scores instead of raw priorities for timeout calculation

Scores are a bit more precise, but require more data, e.g. viewport info to calculate and quickly depreciate.

buildExtensions gets recursively called which causes multiple watchers on the extensions to get created

https://github.com/ampproject/amphtml/blob/master/gulpfile.js#L60

we keep passing watch: true options which doubles the amount of watchers every time build extensions is ran.

this affects the bundling of the files as bundling gets slower and slower.

should <amp-img> be lazyload?

amp-img is loading all images in my page, before user scroll to there. It's correct?

Tks

Is amp-form avaliable?

Hi,

I have found on amp-html-components.md a doc about forms.

I have tried to use the example, but the message DISALLOWED_TAG is showed.

Are amp-input and related tags avaliable?

DISALLOWED_TAG amp-form
    (anonymous function) @ amp.js:10139
    (anonymous function) @ amp.js:10138

DISALLOWED_TAG amp-email-input
    (anonymous function) @ amp.js:10139
    (anonymous function) @ amp.js:10138

DISALLOWED_TAG amp-on
    (anonymous function) @ amp.js:10139
    (anonymous function) @ amp.js:10138

Remove usages of for-of

Each one generates 2 try-catch-finally blocks.

Disgusting :)

@ALL: Org was renamed

You all need to update your upstream remotes

Remove retriable promise

It adds too much complexity.

2 tests failing at head after resource change

Super nice to have: Make validator generate a fully qualifying CSS query for effected element

That way we could find the element when generating the error message and could automatically point to the right element in the DOM.

@Gregable

enhancement: change `Log` methods to accept variadic arguments for message

amp-pixel should validate that URL is HTTPS

Otherwise you get mixed content warnings in prod.

amp-video is not working (u.maybeApplyResponsivenessToItem is not a function)

Hello,

I don't know if I can open issues here or if you prefer that I send to the google group, so sorry if I did wrong.

I'm trying to use amp-video and the following error message appears:

TypeError: u.maybeApplyResponsivenessToItem is not a function

The same occurs with the example page newsstand.html.

In my test page, I'm using this amp.js: https://www.gstatic.com/amphtml/v0.js

Thanks

Remove "load proxy"

Create "action methods" subsystem.

We need a clean and secure way to expose some actions for execution taking into account obfuscation and other issues.

Create viewer config and customization for viewport and event processing

Spec: Disallow http-equiv in meta tags

I tried to make a pull request for this already:
#18

• The existing language in the spec doesn't actually catch pages which refresh.
• It's not clear that other values for http-equiv are worthwhile to support.
  Thanks much for considering.

Investigate a possible risk condition when lightbox is opening.

<amp-video> preroll

Hi

According to the attached comment done by Taylor in the "Component Spec Document", would be possible to include the preroll attribute in the tag ?

Thank you

Taylor Savage
Perfect. I'll add a preroll attribute to the spec for the simple, built-in case. For something like IMA a pretty straightforward Extended Component should be created to enable IMA ads directly, and similar Extended Components should be created for other media ad networks.

Make sure iframes we create work fine in iOS

See https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari for the issue with iframes too large for their context in iOS.

We need to test this for

• youtube (This always fits, so should be fine, but better to test)
• instagram
• twitter
• amp-iframe

Investigate why karma gets stuck after running tests 2x

Try to hack our layout system

Try to build a document that escapes our layout rules in as many ways as possible.

Try to add margins, padding, line-height, whatever, to make a document change size after content loaded.

CC @dvoytenko

gulp minify doesn't terminate

Fix width/height in amp-audio in everything.html

If width is specified, height should be as well.

Console error:

Uncaught Error: Expected height to be available and be an integer/length value: null

Flaky tests after resource changes

To repro:

Scroll to YT videos.
Click reload.
The document doesn't load uniformly.

Lets find out why. This should not happen.

CC @dvoytenko

Discuss: Maximum size validation error if the author stylesheet is larger than 20KB post gzip.

The spec currently requires a validator to compress the stylesheet with gzip.
I'd like to propose simplifying this away, e.g., say "... if the author stylesheet is larger than 50KB" (or some other value. Reasons:

• It's inefficient to have to compress just to validate, and for Javascript I think it introduces a dependency on a pure javascript gzip compressor.
• Compression effectiveness may be subject to specific implementations of gzip / compression levels etc., so it's not well defined.
• Stuff that compresses super well but blows up terrible afterward can be a security problem; I think this is known as a "decompression bomb". When it's not a security problem, it's still annoying to the user because the browser will use a lot of RAM. So I think it's better to discourage effectiveness on text compression. If people can't fit their elaborate CSS, let them shorten the names,ids,labels,etc a little bit and remove the unused cruft. :-)
  Thanks much for considering.

Disallow the title attribute?

I've seen it in example docs, but the spec discourages its use including because it may be useless on mobile devices:
"Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet)."
http://www.w3.org/TR/html5/single-page.html#the-title-attribute

Implement advanced resource prioritization

Current state of discussion is:

Every type of resource has a base priority (image, pixel > ads). Actual load priority is influenced by position in viewport. Highest priority for visible resources, lower priority for resources that are about to becomes visible.

For the base priority we need thresholds: Based on prerender mode we may never want to render

• any resource
• ads, pixels (Even though pixels are high priority during normal loading or even special enough to be out of band)

During scrolling we never want to trigger loading an ad (I think, unless that ends up not feeling good due to incremental rendering).

Carousel and Slides: move controls into $CSS$