{"action":"created","comment":{"url":"https://api.github.com/repos/ampproject/amphtml/pulls/comments/41923856","id":41923856,"diff_hunk":"@@ -0,0 +1,159 @@\n+<!---\n+Copyright 2015 The AMP HTML Authors. All Rights Reserved.\n+\n+Licensed under the Apache License, Version 2.0 (the \"License\");\n+you may not use this file except in compliance with the License.\n+You may obtain a copy of the License at\n+\n+      http://www.apache.org/licenses/LICENSE-2.0\n+\n+Unless required by applicable law or agreed to in writing, software\n+distributed under the License is distributed on an \"AS-IS\" BASIS,\n+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n+See the License for the specific language governing permissions and\n+limitations under the License.\n+-->\n+\n+# AMP HTML ⚡ Layout System\n+\n+## Overview\n+\n+The main goal of the layout system is to ensure that AMP elements can express their layout\n+so that the runtime is able to infer sizing of elements before any remote reosurces, such as\n+JavaScript and data calls, have been completed. This is important since this along\n+significantly reduces rendering and scrolling jank.\n+\n+With this in mind the AMP Layout System is designed to support few but flexible layout\n+that provide good performance guarantees. This system relies on a set of attributes such\n+as `layout`, `width` and `height` to express the element's layout and sizing needs.\n+\n+## Layout Attributes\n+\n+### `width` and `height`\n+\n+Depending on the value of the `layout` attribute AMP component elements must have a `width` and\n+`height` attribute that contains an integer pixel value. Actual layout behavior is determined by the\n+`layout` attribute as described below.\n+\n+In a few cases if `width` or `height` are not specified the AMP runtime can default these values\n+as following:\n+- `amp-pixel`: Both `width` and `height` are defaulted to 0.\n+- `amp-audio`: The default `width` and `height` are inferred from browser.\n+\n+### `layout`\n+\n+The optional layout attribute allows specifying how the component behaves in the document layout.\n+Valid values for the layout attribute are:\n+\n+- Not present: The `layout` will be inferred as following:\n+  - if `width` equals to `auto` `fixed-height` layout is assumed;\n+  - if `width` or `height` attributes are present `fixed` layout is assumed;\n+  - if `width` and `height` are not present `container` layout is assumed\n+- `fixed`: The `width` and `height` attributes must be present. The only exceptions are `amp-pixel`\n+and `amp-audio` elements.\n+- `fixed-height`: The `height` attribute must be present. The `width` attribute must not be present\n+or must be equal to `auto`.\n+- `responsive`: The `width` and `height` attributes must be present and are used to determine the\n+aspect ratio of the component and the component is sized to the width of its container element while\n+maintaining the height based on the aspect ratio.\n+- `fill`: Element size will be determined by the parent element.\n+- `container`: The component is assumed to not have specific layout itself but only act as a\n+container. Its children as rendered immediately.\n+- `nodisplay`: The component takes up zero space on the screen as if its display style was `none`.\n+The `width` and `height` attributes are not required.\n+\n+Each element documents which `layout` values it supported. If an element does not support the\n+specified value it would trigger a runtime error.\n+\n+### `media`\n+\n+All AMP custom elements support the `media` attribute. The value of media is a media query. If the query does not match, the element is not rendered at all and it's resources and potentially it's child resources will not be fetched. If the browser window changes size or orientation the media queries are re-evaluated and elements are hidden and shown based on the new results.\n+\n+Example: Here we have 2 images with mutually exclusive media queries. Depending on the screen width one or the other will be fetched and rendered. Note that the media attribute is available on all custom elements, so it can be used with non-image elements such as ads.\n+\n+```html\n+    <amp-img\n+        media=\"(min-width: 650px)\"\n+        src=\"wide.jpg\"\n+        width=466\n+        height=355 layout=\"responsive\" ></amp-img>\n+    <amp-img\n+        media=\"(max-width: 649px)\"\n+        src=\"narrow.jpg\"\n+        width=527\n+        height=193 layout=\"responsive\" ></amp-img>\n+```\n+\n+### `placeholder`\n+\n+The `placeholder` attribute can be set on any HTML element, not just AMP elements. It indicates that\n+the element marked with this attribute acts as a placeholder for the parent AMP element. If specified\n+a placeholder element must be a direct child of the AMP element. By default, the placeholder is\n+immediately shown for the AMP element, even if the AMP element's resources have not been downloaded\n+or initialized. Once ready the AMP element typically hides placeholder and shows its own content.\n+The exact behavior w.r.t. to placeholder is up to the element's implementation.\n+\n+```html\n+    <amp-anim src=\"animated.gif\" width=466 height=355 layout=\"responsive\" >\n+      <amp-img placeholder src=\"preview.png\" layout=\"fill\"></amp-img>\n+    </amp-anim>\n+```\n+\n+### `fallback`\n+\n+The `fallback` attribute can be set on any HTML element, not just AMP elements. It's a convention that\n+allows the element to communicate to the reader that the browser does not support it. If specified\n+a fallback element must be a direct child of the AMP element. The exact behavior w.r.t. to fallback\n+is up to the element's implementation.\n+\n+```html\n+    <amp-anim src=\"animated.gif\" width=466 height=355 layout=\"responsive\" >\n+      <div fallback>Cannot play animated images on this device.</div>\n+    </amp-anim>\n+```\n+\n+## Behavior\n+\n+A non-container (`layout != container`) AMP element starts up in the unresolved/unbuilt mode in which\n+all of its children are hidden except for a placeholder (see `placeholder` attribute). The JavaScript\n+and data payload necessary to fully construct the element may still be downloading and initializing,\n+but AMP runtime already knows how to size and layout the element only relying on CSS classes and","path":"spec/amp-html-layout.md","position":120,"original_position":120,"commit_id":"3fd68df5afe1455ef19df10969dd45488a3e891a","original_commit_id":"3fd68df5afe1455ef19df10969dd45488a3e891a","user":{"login":"erwinmombay","id":354746,"avatar_url":"https://avatars.githubusercontent.com/u/354746?v=3","gravatar_id":"","url":"https://api.github.com/users/erwinmombay","html_url":"https://github.com/erwinmombay","followers_url":"https://api.github.com/users/erwinmombay/followers","following_url":"https://api.github.com/users/erwinmombay/following{/other_user}","gists_url":"https://api.github.com/users/erwinmombay/gists{/gist_id}","starred_url":"https://api.github.com/users/erwinmombay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/erwinmombay/subscriptions","organizations_url":"https://api.github.com/users/erwinmombay/orgs","repos_url":"https://api.github.com/users/erwinmombay/repos","events_url":"https://api.github.com/users/erwinmombay/events{/privacy}","received_events_url":"https://api.github.com/users/erwinmombay/received_events","type":"User","site_admin":false},"body":"`but the AMP runtime`","created_at":"2015-10-13T20:56:04Z","updated_at":"2015-10-13T20:56:04Z","html_url":"https://github.com/ampproject/amphtml/pull/602#discussion_r41923856","pull_request_url":"https://api.github.com/repos/ampproject/amphtml/pulls/602","_links":{"self":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/comments/41923856"},"html":{"href":"https://github.com/ampproject/amphtml/pull/602#discussion_r41923856"},"pull_request":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/602"}}},"pull_request":{"url":"https://api.github.com/repos/ampproject/amphtml/pulls/602","id":47585177,"html_url":"https://github.com/ampproject/amphtml/pull/602","diff_url":"https://github.com/ampproject/amphtml/pull/602.diff","patch_url":"https://github.com/ampproject/amphtml/pull/602.patch","issue_url":"https://api.github.com/repos/ampproject/amphtml/issues/602","number":602,"state":"open","locked":false,"title":"A unified placeholder and fallback system for layout.","user":{"login":"dvoytenko","id":726049,"avatar_url":"https://avatars.githubusercontent.com/u/726049?v=3","gravatar_id":"","url":"https://api.github.com/users/dvoytenko","html_url":"https://github.com/dvoytenko","followers_url":"https://api.github.com/users/dvoytenko/followers","following_url":"https://api.github.com/users/dvoytenko/following{/other_user}","gists_url":"https://api.github.com/users/dvoytenko/gists{/gist_id}","starred_url":"https://api.github.com/users/dvoytenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dvoytenko/subscriptions","organizations_url":"https://api.github.com/users/dvoytenko/orgs","repos_url":"https://api.github.com/users/dvoytenko/repos","events_url":"https://api.github.com/users/dvoytenko/events{/privacy}","received_events_url":"https://api.github.com/users/dvoytenko/received_events","type":"User","site_admin":false},"body":"/cc @erwinmombay \r\n\r\nCloses #406.\r\n\r\nNotable changes:\r\n1. Placeholder/fallback code is refactored from BaseElement to AmpElement to allow earlier workflows to take place before BaseElement is upgraded.\r\n2. Placeholder is consistently now toggled off once the first layout is complete. Overrideable by subclasses (e.g. amp-anim).\r\n3. A new spec file created specifically for layout and all its attributes.\r\n","created_at":"2015-10-13T20:38:38Z","updated_at":"2015-10-13T20:56:04Z","closed_at":null,"merged_at":null,"merge_commit_sha":"73c1f962ed8f8f220093f512eb2cc52ae5a550a0","assignee":{"login":"cramforce","id":89679,"avatar_url":"https://avatars.githubusercontent.com/u/89679?v=3","gravatar_id":"","url":"https://api.github.com/users/cramforce","html_url":"https://github.com/cramforce","followers_url":"https://api.github.com/users/cramforce/followers","following_url":"https://api.github.com/users/cramforce/following{/other_user}","gists_url":"https://api.github.com/users/cramforce/gists{/gist_id}","starred_url":"https://api.github.com/users/cramforce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cramforce/subscriptions","organizations_url":"https://api.github.com/users/cramforce/orgs","repos_url":"https://api.github.com/users/cramforce/repos","events_url":"https://api.github.com/users/cramforce/events{/privacy}","received_events_url":"https://api.github.com/users/cramforce/received_events","type":"User","site_admin":false},"milestone":null,"commits_url":"https://api.github.com/repos/ampproject/amphtml/pulls/602/commits","review_comments_url":"https://api.github.com/repos/ampproject/amphtml/pulls/602/comments","review_comment_url":"https://api.github.com/repos/ampproject/amphtml/pulls/comments{/number}","comments_url":"https://api.github.com/repos/ampproject/amphtml/issues/602/comments","statuses_url":"https://api.github.com/repos/ampproject/amphtml/statuses/3fd68df5afe1455ef19df10969dd45488a3e891a","head":{"label":"dvoytenko:placeholder2","ref":"placeholder2","sha":"3fd68df5afe1455ef19df10969dd45488a3e891a","user":{"login":"dvoytenko","id":726049,"avatar_url":"https://avatars.githubusercontent.com/u/726049?v=3","gravatar_id":"","url":"https://api.github.com/users/dvoytenko","html_url":"https://github.com/dvoytenko","followers_url":"https://api.github.com/users/dvoytenko/followers","following_url":"https://api.github.com/users/dvoytenko/following{/other_user}","gists_url":"https://api.github.com/users/dvoytenko/gists{/gist_id}","starred_url":"https://api.github.com/users/dvoytenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dvoytenko/subscriptions","organizations_url":"https://api.github.com/users/dvoytenko/orgs","repos_url":"https://api.github.com/users/dvoytenko/repos","events_url":"https://api.github.com/users/dvoytenko/events{/privacy}","received_events_url":"https://api.github.com/users/dvoytenko/received_events","type":"User","site_admin":false},"repo":{"id":43817704,"name":"amphtml","full_name":"dvoytenko/amphtml","owner":{"login":"dvoytenko","id":726049,"avatar_url":"https://avatars.githubusercontent.com/u/726049?v=3","gravatar_id":"","url":"https://api.github.com/users/dvoytenko","html_url":"https://github.com/dvoytenko","followers_url":"https://api.github.com/users/dvoytenko/followers","following_url":"https://api.github.com/users/dvoytenko/following{/other_user}","gists_url":"https://api.github.com/users/dvoytenko/gists{/gist_id}","starred_url":"https://api.github.com/users/dvoytenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dvoytenko/subscriptions","organizations_url":"https://api.github.com/users/dvoytenko/orgs","repos_url":"https://api.github.com/users/dvoytenko/repos","events_url":"https://api.github.com/users/dvoytenko/events{/privacy}","received_events_url":"https://api.github.com/users/dvoytenko/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/dvoytenko/amphtml","description":"","fork":true,"url":"https://api.github.com/repos/dvoytenko/amphtml","forks_url":"https://api.github.com/repos/dvoytenko/amphtml/forks","keys_url":"https://api.github.com/repos/dvoytenko/amphtml/keys{/key_id}","collaborators_url":"https://api.github.com/repos/dvoytenko/amphtml/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/dvoytenko/amphtml/teams","hooks_url":"https://api.github.com/repos/dvoytenko/amphtml/hooks","issue_events_url":"https://api.github.com/repos/dvoytenko/amphtml/issues/events{/number}","events_url":"https://api.github.com/repos/dvoytenko/amphtml/events","assignees_url":"https://api.github.com/repos/dvoytenko/amphtml/assignees{/user}","branches_url":"https://api.github.com/repos/dvoytenko/amphtml/branches{/branch}","tags_url":"https://api.github.com/repos/dvoytenko/amphtml/tags","blobs_url":"https://api.github.com/repos/dvoytenko/amphtml/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/dvoytenko/amphtml/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/dvoytenko/amphtml/git/refs{/sha}","trees_url":"https://api.github.com/repos/dvoytenko/amphtml/git/trees{/sha}","statuses_url":"https://api.github.com/repos/dvoytenko/amphtml/statuses/{sha}","languages_url":"https://api.github.com/repos/dvoytenko/amphtml/languages","stargazers_url":"https://api.github.com/repos/dvoytenko/amphtml/stargazers","contributors_url":"https://api.github.com/repos/dvoytenko/amphtml/contributors","subscribers_url":"https://api.github.com/repos/dvoytenko/amphtml/subscribers","subscription_url":"https://api.github.com/repos/dvoytenko/amphtml/subscription","commits_url":"https://api.github.com/repos/dvoytenko/amphtml/commits{/sha}","git_commits_url":"https://api.github.com/repos/dvoytenko/amphtml/git/commits{/sha}","comments_url":"https://api.github.com/repos/dvoytenko/amphtml/comments{/number}","issue_comment_url":"https://api.github.com/repos/dvoytenko/amphtml/issues/comments{/number}","contents_url":"https://api.github.com/repos/dvoytenko/amphtml/contents/{+path}","compare_url":"https://api.github.com/repos/dvoytenko/amphtml/compare/{base}...{head}","merges_url":"https://api.github.com/repos/dvoytenko/amphtml/merges","archive_url":"https://api.github.com/repos/dvoytenko/amphtml/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/dvoytenko/amphtml/downloads","issues_url":"https://api.github.com/repos/dvoytenko/amphtml/issues{/number}","pulls_url":"https://api.github.com/repos/dvoytenko/amphtml/pulls{/number}","milestones_url":"https://api.github.com/repos/dvoytenko/amphtml/milestones{/number}","notifications_url":"https://api.github.com/repos/dvoytenko/amphtml/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/dvoytenko/amphtml/labels{/name}","releases_url":"https://api.github.com/repos/dvoytenko/amphtml/releases{/id}","created_at":"2015-10-07T13:30:20Z","updated_at":"2015-10-07T13:30:21Z","pushed_at":"2015-10-13T20:40:11Z","git_url":"git://github.com/dvoytenko/amphtml.git","ssh_url":"git@github.com:dvoytenko/amphtml.git","clone_url":"https://github.com/dvoytenko/amphtml.git","svn_url":"https://github.com/dvoytenko/amphtml","homepage":"","size":7144,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":false,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"ampproject:master","ref":"master","sha":"0f031f1e7e06f7d27ad0476c45051794e7ab8e96","user":{"login":"ampproject","id":14114390,"avatar_url":"https://avatars.githubusercontent.com/u/14114390?v=3","gravatar_id":"","url":"https://api.github.com/users/ampproject","html_url":"https://github.com/ampproject","followers_url":"https://api.github.com/users/ampproject/followers","following_url":"https://api.github.com/users/ampproject/following{/other_user}","gists_url":"https://api.github.com/users/ampproject/gists{/gist_id}","starred_url":"https://api.github.com/users/ampproject/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ampproject/subscriptions","organizations_url":"https://api.github.com/users/ampproject/orgs","repos_url":"https://api.github.com/users/ampproject/repos","events_url":"https://api.github.com/users/ampproject/events{/privacy}","received_events_url":"https://api.github.com/users/ampproject/received_events","type":"Organization","site_admin":false},"repo":{"id":41766002,"name":"amphtml","full_name":"ampproject/amphtml","owner":{"login":"ampproject","id":14114390,"avatar_url":"https://avatars.githubusercontent.com/u/14114390?v=3","gravatar_id":"","url":"https://api.github.com/users/ampproject","html_url":"https://github.com/ampproject","followers_url":"https://api.github.com/users/ampproject/followers","following_url":"https://api.github.com/users/ampproject/following{/other_user}","gists_url":"https://api.github.com/users/ampproject/gists{/gist_id}","starred_url":"https://api.github.com/users/ampproject/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ampproject/subscriptions","organizations_url":"https://api.github.com/users/ampproject/orgs","repos_url":"https://api.github.com/users/ampproject/repos","events_url":"https://api.github.com/users/ampproject/events{/privacy}","received_events_url":"https://api.github.com/users/ampproject/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/ampproject/amphtml","description":"AMP HTML source code, samples, and documentation.  See below for more info.","fork":false,"url":"https://api.github.com/repos/ampproject/amphtml","forks_url":"https://api.github.com/repos/ampproject/amphtml/forks","keys_url":"https://api.github.com/repos/ampproject/amphtml/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ampproject/amphtml/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ampproject/amphtml/teams","hooks_url":"https://api.github.com/repos/ampproject/amphtml/hooks","issue_events_url":"https://api.github.com/repos/ampproject/amphtml/issues/events{/number}","events_url":"https://api.github.com/repos/ampproject/amphtml/events","assignees_url":"https://api.github.com/repos/ampproject/amphtml/assignees{/user}","branches_url":"https://api.github.com/repos/ampproject/amphtml/branches{/branch}","tags_url":"https://api.github.com/repos/ampproject/amphtml/tags","blobs_url":"https://api.github.com/repos/ampproject/amphtml/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ampproject/amphtml/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ampproject/amphtml/git/refs{/sha}","trees_url":"https://api.github.com/repos/ampproject/amphtml/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ampproject/amphtml/statuses/{sha}","languages_url":"https://api.github.com/repos/ampproject/amphtml/languages","stargazers_url":"https://api.github.com/repos/ampproject/amphtml/stargazers","contributors_url":"https://api.github.com/repos/ampproject/amphtml/contributors","subscribers_url":"https://api.github.com/repos/ampproject/amphtml/subscribers","subscription_url":"https://api.github.com/repos/ampproject/amphtml/subscription","commits_url":"https://api.github.com/repos/ampproject/amphtml/commits{/sha}","git_commits_url":"https://api.github.com/repos/ampproject/amphtml/git/commits{/sha}","comments_url":"https://api.github.com/repos/ampproject/amphtml/comments{/number}","issue_comment_url":"https://api.github.com/repos/ampproject/amphtml/issues/comments{/number}","contents_url":"https://api.github.com/repos/ampproject/amphtml/contents/{+path}","compare_url":"https://api.github.com/repos/ampproject/amphtml/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ampproject/amphtml/merges","archive_url":"https://api.github.com/repos/ampproject/amphtml/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ampproject/amphtml/downloads","issues_url":"https://api.github.com/repos/ampproject/amphtml/issues{/number}","pulls_url":"https://api.github.com/repos/ampproject/amphtml/pulls{/number}","milestones_url":"https://api.github.com/repos/ampproject/amphtml/milestones{/number}","notifications_url":"https://api.github.com/repos/ampproject/amphtml/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ampproject/amphtml/labels{/name}","releases_url":"https://api.github.com/repos/ampproject/amphtml/releases{/id}","created_at":"2015-09-01T22:10:53Z","updated_at":"2015-10-13T20:53:32Z","pushed_at":"2015-10-13T20:40:11Z","git_url":"git://github.com/ampproject/amphtml.git","ssh_url":"git@github.com:ampproject/amphtml.git","clone_url":"https://github.com/ampproject/amphtml.git","svn_url":"https://github.com/ampproject/amphtml","homepage":"https://ampproject.org","size":10344,"stargazers_count":3501,"watchers_count":3501,"language":"JavaScript","has_issues":true,"has_downloads":false,"has_wiki":false,"has_pages":false,"forks_count":278,"mirror_url":null,"open_issues_count":133,"forks":278,"open_issues":133,"watchers":3501,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/602"},"html":{"href":"https://github.com/ampproject/amphtml/pull/602"},"issue":{"href":"https://api.github.com/repos/ampproject/amphtml/issues/602"},"comments":{"href":"https://api.github.com/repos/ampproject/amphtml/issues/602/comments"},"review_comments":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/602/comments"},"review_comment":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/602/commits"},"statuses":{"href":"https://api.github.com/repos/ampproject/amphtml/statuses/3fd68df5afe1455ef19df10969dd45488a3e891a"}}}}